Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/391710 )
Change subject: Provide capabilities in Skin to load all images in page
......................................................................
Provide capabilities in Skin to load all images in page
Changes:
* A new flag is added to the method loadImages which can be used
to override the "load" heuristic and force the loading of all images
* The loadImage function now returns a deferred object which captures
the success/failure of the loading of an image
* loadImages now returns a deferred object based on the results of loadImage
Bug: T180058
Change-Id: Id7f21606be3db22fe8dfde2db675f9905547cfea
---
M resources/mobile.startup/Skin.js
1 file changed, 37 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/10/391710/1
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 543b253..ebcbccf 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -2,7 +2,10 @@
var browser = M.require( 'mobile.startup/Browser' ).getSingleton(),
View = M.require( 'mobile.startup/View' ),
+ Deferred = $.Deferred,
+ when = $.when,
icons = M.require( 'mobile.startup/icons' ),
+ viewport = mw.viewport,
spinner = icons.spinner();
/**
@@ -118,12 +121,18 @@
},
/**
- * Load images on demand
+ * Load all images in the page
* @param {jQuery.Object} [$container] The container that
should be
* searched for image placeholders. Defaults to "#content".
+ * @param {Boolean} [unconditionally] when true, all images in
the browser will be loaded regardless of
+ * proximity to viewport. When false or not provided images
will be loaded based on whether the skin
+ * thinks they will be necessary for reading soon based on
proximity to viewport.
+ * @return {jQuery.Deferred} which will be resolved when the
attempts to load all images subject to
+ * loading have been completed.
*/
- loadImages: function ( $container ) {
+ loadImages: function ( $container, unconditionally ) {
var self = this,
+ callbacks = [],
offset = $( window ).height() * 1.5,
imagePlaceholders;
@@ -131,20 +140,30 @@
imagePlaceholders = $container.find(
'.lazy-image-placeholder' ).toArray();
/**
+ * Check whether an image should be loaded based on its
proximity to the
+ * viewport; and whether it is displayed to the user.
+ * @param {jQuery.Object} $placeholder
+ * @return {Boolean}
+ * @ignore
+ */
+ function shouldLoadImage( $placeholder ) {
+ return viewport.isElementCloseToViewport(
$placeholder[0], offset ) &&
+ // If a placeholder is an inline
element without a height attribute set it will record as hidden
+ // to circumvent this we also need to
test the height (see T143768).
+ ( $placeholder.is( ':visible' ) ||
$placeholder.height() === 0 );
+ }
+
+ /**
* Load remaining images in viewport
*/
function _loadImages() {
-
imagePlaceholders = $.grep( imagePlaceholders,
function ( placeholder ) {
var $placeholder = self.$( placeholder
);
- if (
-
mw.viewport.isElementCloseToViewport( placeholder, offset ) &&
- // If a placeholder is an
inline element without a height attribute set it will record as hidden
- // to circumvent this we also
need to test the height (see T143768).
- ( $placeholder.is( ':visible' )
|| $placeholder.height() === 0 )
- ) {
- self.loadImage( $placeholder );
+ if ( unconditionally ||
shouldLoadImage( self.$( placeholder ) ) ) {
+ callbacks.push(
+ self.loadImage(
$placeholder )
+ );
return false;
}
@@ -166,14 +185,17 @@
this.on( 'changed', _loadImages );
_loadImages();
+ return when( callbacks );
},
/**
* Load an image on demand
* @param {jQuery.Object} $placeholder
+ * @return {jQuery.Deferred}
*/
loadImage: function ( $placeholder ) {
var
+ d = Deferred(),
width = $placeholder.attr( 'data-width' ),
height = $placeholder.attr( 'data-height' ),
// Image will start downloading
@@ -185,6 +207,10 @@
// dimensions the same and not trigger layouts
$downloadingImage.addClass( 'image-lazy-loaded'
);
$placeholder.replaceWith( $downloadingImage );
+ d.resolve();
+ } );
+ $downloadingImage.on( 'error', function () {
+ d.reject();
} );
// Trigger image download after binding the load handler
@@ -197,6 +223,7 @@
style: $placeholder.attr( 'style' ),
srcset: $placeholder.attr( 'data-srcset' )
} );
+ return d;
},
/**
--
To view, visit https://gerrit.wikimedia.org/r/391710
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id7f21606be3db22fe8dfde2db675f9905547cfea
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
