jenkins-bot has submitted this change and it was merged.
Change subject: Use the src attribute Luke
......................................................................
Use the src attribute Luke
There is no need to use the image inside the noscript tag.
This passes the alt+src attribute onto the placeholder
and uses them in construction.
This does increase HTML size, but this will be swallowed in gzip
compression and this avoids issues with escaping.
Bug: T129198
Bug: T126593
Change-Id: I37a71d6dff34f0cd70d79d35941b4afe1cea72bf
---
M includes/MobileFormatter.php
M resources/mobile.startup/Skin.js
2 files changed, 15 insertions(+), 5 deletions(-)
Approvals:
Bmansurov: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index c7c5b3a..b3a0423 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -193,6 +193,14 @@
$imgPlaceholder = $doc->createElement( 'span' );
$imgPlaceholder->setAttribute( 'class',
'lazy-image-placeholder' );
$imgPlaceholder->setAttribute( 'style',
$dimensionsStyle );
+ foreach ( [ 'src', 'alt', 'width', 'height', 'srcset' ]
as $attr ) {
+ if ( $img->hasAttribute( $attr ) ) {
+ $imgPlaceholder->setAttribute(
"data-$attr", $img->getAttribute( $attr ) );
+ }
+ }
+ // 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
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 84f4ed7..51564e5 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -219,17 +219,16 @@
* @param {jQuery.Object} $placeholder
*/
loadImage: function ( $placeholder ) {
- var $noscript = $placeholder.prev( 'noscript' ),
+ var
// Grab the image markup from the HTML only
fallback
// Image will start downloading
- $image = $( $.parseHTML( $noscript.text() ) ),
$downloadingImage = $( '<img/>' );
// When the image has loaded
$downloadingImage.on( 'load', function () {
// Swap the HTML inside the placeholder (to
keep the layout and
// dimensions the same and not trigger layouts
- $placeholder.empty().append( $image );
+ $placeholder.empty().append( $downloadingImage
);
// Set the loaded class after insertion of the
HTML to trigger the
// animations.
$placeholder.addClass( 'loaded' );
@@ -237,8 +236,11 @@
// Trigger image download after binding the load handler
$downloadingImage.attr( {
- src: $image.attr( 'src' ),
- srcset: $image.attr( 'srcset' )
+ width: $placeholder.attr( 'data-width' ),
+ height: $placeholder.attr( 'data-height' ),
+ src: $placeholder.attr( 'data-src' ),
+ alt: $placeholder.attr( 'data-alt' ),
+ srcset: $placeholder.attr( 'data-srcset' )
} );
},
--
To view, visit https://gerrit.wikimedia.org/r/275670
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I37a71d6dff34f0cd70d79d35941b4afe1cea72bf
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
