jenkins-bot has submitted this change and it was merged.
Change subject: Use throttled events for lazy loading images
......................................................................
Use throttled events for lazy loading images
Instead of debounced events, which seem to cause problems in browsers that
feature inertia scrolling, given it doesn't trigger as often as it needs to and
lazy images are seen unloaded when scrolling.
This should improve the UX of lazy loaded images a lot.
* Added events 'scroll:throttled' and 'resize:throttled' to mw.mobileFrontend
Bug: T137874
Change-Id: Ifeed0575de7cbcef98dc772368c7edfe790b2c36
---
M resources/mobile.startup/Skin.js
M resources/skins.minerva.scripts/preInit.js
2 files changed, 29 insertions(+), 6 deletions(-)
Approvals:
Bmansurov: Looks good to me, but someone else must approve
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 54c1ace..dd8c4c7 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -193,16 +193,16 @@
} );
if ( !imagePlaceholders.length ) {
- M.off( 'scroll', _loadImages );
- M.off( 'resize', _loadImages );
+ M.off( 'scroll:throttled', _loadImages
);
+ M.off( 'resize:throttled', _loadImages
);
M.off( 'section-toggled', _loadImages );
self.off( 'changed', _loadImages );
}
}
- M.on( 'scroll', _loadImages );
- M.on( 'resize', _loadImages );
+ M.on( 'scroll:throttled', _loadImages );
+ M.on( 'resize:throttled', _loadImages );
M.on( 'section-toggled', _loadImages );
this.on( 'changed', _loadImages );
diff --git a/resources/skins.minerva.scripts/preInit.js
b/resources/skins.minerva.scripts/preInit.js
index 3c62d0b..8b63a0f 100644
--- a/resources/skins.minerva.scripts/preInit.js
+++ b/resources/skins.minerva.scripts/preInit.js
@@ -23,9 +23,32 @@
} );
M.define( 'skins.minerva.scripts/skin', skin ).deprecate(
'mobile.startup/skin' );
+ /**
+ * Given 2 functions, it returns a function that will run both with it's
+ * context and parameters and return the results combined
+ * @private
+ * @param {Function} fn1
+ * @param {Function} fn2
+ * @return {Function} which returns the results of [fn1, fn2]
+ */
+ function apply2( fn1, fn2 ) {
+ return function () {
+ return [
+ fn1.apply( this, arguments ),
+ fn2.apply( this, arguments )
+ ];
+ };
+ }
+
$( window )
- .on( 'resize', $.debounce( 100, $.proxy( M, 'emit', 'resize' )
) )
- .on( 'scroll', $.debounce( 100, $.proxy( M, 'emit', 'scroll' )
) );
+ .on( 'resize', apply2(
+ $.debounce( 100, $.proxy( M, 'emit', 'resize' ) ),
+ $.throttle( 200, $.proxy( M, 'emit', 'resize:throttled'
) )
+ ) )
+ .on( 'scroll', apply2(
+ $.debounce( 100, $.proxy( M, 'emit', 'scroll' ) ),
+ $.throttle( 200, $.proxy( M, 'emit', 'scroll:throttled'
) )
+ ) );
/**
* Get current page view object
--
To view, visit https://gerrit.wikimedia.org/r/294895
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ifeed0575de7cbcef98dc772368c7edfe790b2c36
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: Phuedx <g...@samsmith.io>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
