Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/277568
Change subject: Don't serve spinner in raw HTML
......................................................................
Don't serve spinner in raw HTML
Only show the spinner when we commence loading an image
Only show the spinner if the image meets certain height and width
requirements.
Bug: T129098
Bug: T129202
Change-Id: Ie78688491dfcbdb6679f4f2d6f234ccc1de288e1
---
M includes/MobileFormatter.php
M resources/mobile.startup/Skin.js
M tests/phpunit/MobileFormatterTest.php
3 files changed, 12 insertions(+), 15 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/68/277568/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index d6579de..2f248e4 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -201,12 +201,6 @@
// HTML only clients
$noscript = $doc->createElement( 'noscript' );
- // Loading status of image placeholder
- $spinner = $doc->createElement( 'span' );
- $spinner->setAttribute( 'class', MobileUI::iconClass(
- 'spinner', 'element', 'loading spinner'
- ) );
-
// To be loaded image placeholder
$imgPlaceholder = $doc->createElement( 'span' );
$imgPlaceholder->setAttribute( 'class',
'lazy-image-placeholder' );
@@ -218,8 +212,6 @@
}
// Assume data saving and remove srcset attribute from
the non-js experience
$img->removeAttribute( 'srcset' );
-
- $imgPlaceholder->appendChild( $spinner );
// Set the placeholder where the original image was
$parent->replaceChild( $imgPlaceholder, $img );
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index f7771c3..0d5442b 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -2,6 +2,7 @@
var browser = M.require( 'mobile.browser/browser' ),
View = M.require( 'mobile.view/View' ),
+ Icon = M.require( 'mobile.startup/Icon' ),
context = M.require( 'mobile.context/context' );
/**
@@ -219,9 +220,18 @@
*/
loadImage: function ( $placeholder ) {
var
+ width = $placeholder.attr( 'data-width' ),
+ height = $placeholder.attr( 'data-height' ),
// Grab the image markup from the HTML only
fallback
// Image will start downloading
$downloadingImage = $( '<img/>' );
+
+ if ( width > 80 && height > 80 ) {
+ new Icon( {
+ name: 'spinner',
+ additionalClassNames: 'loading'
+ } ).appendTo( $placeholder );
+ }
// When the image has loaded
$downloadingImage.on( 'load', function () {
@@ -235,8 +245,8 @@
// Trigger image download after binding the load handler
$downloadingImage.attr( {
- width: $placeholder.attr( 'data-width' ),
- height: $placeholder.attr( 'data-height' ),
+ width: width,
+ height: height,
src: $placeholder.attr( 'data-src' ),
alt: $placeholder.attr( 'data-alt' ),
srcset: $placeholder.attr( 'data-srcset' )
diff --git a/tests/phpunit/MobileFormatterTest.php
b/tests/phpunit/MobileFormatterTest.php
index 115c789..2bc8109 100644
--- a/tests/phpunit/MobileFormatterTest.php
+++ b/tests/phpunit/MobileFormatterTest.php
@@ -47,11 +47,6 @@
. 'style="width: 100px;height: 100px;" '
. 'data-src="foo.jpg" data-alt="foo" data-width="100"
data-height="100" '
. 'data-srcset="foo-1.5x.jpg 1.5x, foo-2x.jpg 2x">'
- . Html::element( 'span',
- array(
- 'class' => MobileUI::iconClass(
'spinner', 'element', 'loading spinner' ),
- )
- )
. '</span>';
$noscript = '<noscript><img alt="foo" src="foo.jpg" width="100"
height="100"></noscript>';
--
To view, visit https://gerrit.wikimedia.org/r/277568
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie78688491dfcbdb6679f4f2d6f234ccc1de288e1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
