jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/349275 )
Change subject: Use replaceWith rather than appendTo to add lazy loaded image
......................................................................
Use replaceWith rather than appendTo to add lazy loaded image
* When loading an image use replaceWith
* Always use inline-block for placeholder. While the image isn't
loaded this reserves the space, however when it does load the
placeholder no longer interferes with the styles (reducing the
issue of T146298)
* Drop animation from the container
* rename .loaded class to .image-lazy-loaded to avoid ambiguity
with general loaded term
Change-Id: I3ca92f81a626fcb971c5280b32569bec8c245373
---
M resources/mobile.startup/Skin.js
M resources/skins.minerva.base.styles/images.less
2 files changed, 9 insertions(+), 40 deletions(-)
Approvals:
Pmiazga: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 01e5072..cffdec1 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -230,10 +230,8 @@
$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( $downloadingImage
);
- // Set the loaded class after insertion of the
HTML to trigger the
- // animations.
- $placeholder.addClass( 'loaded' );
+ $downloadingImage.addClass( 'image-lazy-loaded'
);
+ $placeholder.replaceWith( $downloadingImage );
} );
// Trigger image download after binding the load handler
@@ -243,6 +241,7 @@
height: height,
src: $placeholder.attr( 'data-src' ),
alt: $placeholder.attr( 'data-alt' ),
+ style: $placeholder.attr( 'style' ),
srcset: $placeholder.attr( 'data-srcset' )
} );
},
diff --git a/resources/skins.minerva.base.styles/images.less
b/resources/skins.minerva.base.styles/images.less
index a9cdfee..5a28720 100644
--- a/resources/skins.minerva.base.styles/images.less
+++ b/resources/skins.minerva.base.styles/images.less
@@ -10,7 +10,7 @@
// and https://phabricator.wikimedia.org/T144567
li &,
span & {
- display: inline;
+ display: inline-block;
}
// The image placeholder for shouldn't show for no-js devices
@@ -23,24 +23,12 @@
// In order to avoid reflows placeholder needs to be block, or
// inline-block+overflow:hidden given it is nested inside an inline <a>
display: block;
+}
- // When inserted, don't show the image because we want to animate it
- img {
- opacity: 0;
- }
-
- // When the image has loaded transition background color and image
opacity
- // for a fade-in effect
- &.loaded {
- .animation( fadeOutContainer @animationDuration ease-in );
- background-color: transparent;
- border: 0;
-
- img {
- .animation( fadeInImage @animationDuration ease-in );
- opacity: 1;
- }
- }
+// When the image has loaded transition background color and image opacity
+// for a fade-in effect
+img.image-lazy-loaded {
+ .animation( fadeInImage @animationDuration ease-in );
}
@-webkit-keyframes fadeInImage {
@@ -58,23 +46,5 @@
}
to {
opacity: 1;
- }
-}
-
-@-webkit-keyframes fadeOutContainer {
- from {
- background-color: @placeholderBackgroundColor;
- }
- to {
- background-color: transparent;
- }
-}
-
-@keyframes fadeOutContainer {
- from {
- background-color: @placeholderBackgroundColor;
- }
- to {
- background-color: transparent;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/349275
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3ca92f81a626fcb971c5280b32569bec8c245373
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Pmiazga <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
