Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/349275 )
Change subject: POC: Use JavaScript to animate the ease-in of lazy loaded image
......................................................................
POC: Use JavaScript to animate the ease-in of lazy loaded image
When loading an image use replaceWith
Change-Id: I3ca92f81a626fcb971c5280b32569bec8c245373
---
M resources/mobile.startup/Skin.js
M resources/skins.minerva.base.styles/images.less
2 files changed, 3 insertions(+), 56 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/75/349275/1
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 01e5072..a08dac1 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -230,7 +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
);
+ $downloadingImage.fadeIn( 300 );
+ $placeholder.replaceWith( $downloadingImage );
// Set the loaded class after insertion of the
HTML to trigger the
// animations.
$placeholder.addClass( 'loaded' );
@@ -243,6 +244,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..8a6eea8 100644
--- a/resources/skins.minerva.base.styles/images.less
+++ b/resources/skins.minerva.base.styles/images.less
@@ -1,7 +1,6 @@
@import 'minerva.variables.less';
@import 'minerva.mixins.less';
-@animationDuration: 0.3s;
@placeholderBackgroundColor: @grayLightest;
.lazy-image-placeholder {
@@ -23,58 +22,4 @@
// 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;
- }
- }
-}
-
-@-webkit-keyframes fadeInImage {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes fadeInImage {
- from {
- opacity: 0;
- }
- 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: newchange
Gerrit-Change-Id: I3ca92f81a626fcb971c5280b32569bec8c245373
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
