Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/248312
Change subject: WIP: load images on demand when JS is enabled
......................................................................
WIP: load images on demand when JS is enabled
Change-Id: Iebcac684c58feb76b9277dccab6183a5f2f61f52
---
M includes/MobileFormatter.php
M includes/MobileFrontend.body.php
M resources/mobile.startup/Skin.js
3 files changed, 109 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/12/248312/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index 3a9f0d8..a28666a 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -120,6 +120,36 @@
}
/**
+ * Enables images to be loaded asynchronously
+ */
+ public function doEnableImagesForAsync() {
+ $doc = $this->getDoc();
+ $domElemsToReplace = array();
+ foreach ( $doc->getElementsByTagName( 'img' ) as $element ) {
+ $domElemsToReplace[] = $element;
+ }
+ /** @var $element DOMElement */
+ foreach ( $domElemsToReplace as $element ) {
+ $parent = $element->parentNode;
+
+
+ $noscript = $doc->createElement( 'noscript' );
+ $noscript->appendChild( $element );
+ $parent->appendChild( $noscript );
+
+// $alt = $element->getAttribute( 'alt' );
+ // , htmlspecialchars( $alt )
+ $spinner = $doc->createElement( 'span' );
+ $spinner->setAttribute( 'class', MobileUI::iconClass(
'spinner', 'element', 'loading spinner' ) );
+ $spinner->setAttribute( 'style', 'display: block' );
+ $parent->appendChild( $spinner );
+// var_dump( $parent );
+// echo '<br><br><br><br>';
+ }
+// die;
+ }
+
+ /**
* Replaces images with [annotations from alt]
*/
private function doRemoveImages() {
diff --git a/includes/MobileFrontend.body.php b/includes/MobileFrontend.body.php
index 28dbe0c..7275d77 100644
--- a/includes/MobileFrontend.body.php
+++ b/includes/MobileFrontend.body.php
@@ -36,6 +36,7 @@
$context = MobileContext::singleton();
$formatter = MobileFormatter::newFromContext( $context, $html );
+ $formatter->doEnableImagesForAsync();
Hooks::run( 'MobileFrontendBeforeDOM', array( $context,
$formatter ) );
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 0d5c195..38fef51 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -2,7 +2,8 @@
var Skin,
browser = M.require( 'mobile.browser/browser' ),
- View = M.require( 'mobile.view/View' );
+ View = M.require( 'mobile.view/View' ),
+ $window = $( window );
/**
* Representation of the current skin being rendered.
@@ -125,6 +126,8 @@
M.on( 'resize', $.proxy( this, 'emit', '_resize' ) );
this.on( '_resize', loadWideScreenModules );
this.emit( '_resize' );
+
+ this.loadImages();
},
/**
* @inheritdoc
@@ -160,6 +163,80 @@
},
/**
+ * Check if at least half of the element's height and half of
its width are in viewport
+ * @method
+ * @param {jQuery.Object} $el - element that's being tested
+ * @return {Boolean}
+ */
+ isElementInViewport: function ( $el ) {
+ var windowHeight = $window.height(),
+ windowWidth = $window.width(),
+ windowScrollLeft = $window.scrollLeft(),
+ windowScrollTop = $window.scrollTop(),
+ elHeight = $el.height(),
+ elWidth = $el.width(),
+ elOffset = $el.offset();
+
+ return (
+ ( windowScrollTop + windowHeight >=
elOffset.top + elHeight / 2 ) &&
+ ( windowScrollLeft + windowWidth >=
elOffset.left + elWidth / 2 ) &&
+ ( windowScrollTop <= elOffset.top + elHeight /
2 )
+ );
+ },
+
+ /**
+ * Load an image on demand
+ * @param {jQuery.Object} $image
+ */
+ loadImages: function () {
+ var self = this,
+ timer = null,
+ $imageLinks = $( '#content' ).find( '.image' );
+
+ function _loadImages() {
+ var toRemove = [];
+
+ $.each( $imageLinks, function ( i, link ) {
+ var $imageLink = $( link );
+
+ if ( self.isElementInViewport(
$imageLink ) ) {
+ self.loadImage( $imageLink );
+ toRemove.push( i );
+ }
+ } );
+
+ $.each( toRemove, function ( i, id ) {
+ $imageLinks.splice( id, 1 );
+ } );
+
+
+ if ( !$imageLinks.length ) {
+ $window.off( 'scroll.load-images' );
+ }
+
+ };
+
+ $window.on(
+ 'scroll.load-images',
+ // debounce
+ function () {
+ clearTimeout( timer );
+ timer = setTimeout( _loadImages, 250 );
+ }
+ );
+
+ _loadImages();
+ console.log('i work ');
+ },
+
+ loadImage: function ( $imageLink ) {
+ var $noscript = $imageLink.find( 'noscript' ),
+ $image = $( $noscript.text() );
+
+ $imageLink.html( $image );
+ },
+
+ /**
* Returns the appropriate license message including links/name
to
* terms of use (if any) and license page
*/
--
To view, visit https://gerrit.wikimedia.org/r/248312
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iebcac684c58feb76b9277dccab6183a5f2f61f52
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
