golem
/
MinervaNeue
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Hygiene: lazy loading animations do not need to be render blocking 

The transition only happens when images are loaded via JavaScript
so limit the styles to a file loaded via JS NOT render blocking
CSS

Change-Id: I56661db13e7fbb400a05b13c369d8598df449297
This commit is contained in:
jdlrobson 2018-07-05 15:46:53 -07:00 committed by Stephen Niedzielski
parent 4aba34a5ed
commit fcaf244cc4
2 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/skins.minerva.base.styles/images.less
View File

@ -1,8 +1,6 @@
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
@import 'mediawiki.mixins.animation';
@animationDuration: 0.3s;
@placeholderBackgroundColor: @grayLightest;
.lazy-image-placeholder {
@ -27,27 +25,3 @@
// see T146298
display: inline-block;
}
// 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 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInImage {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

30
resources/skins.minerva.scripts/styles.less
View File

@ -1,12 +1,40 @@
@import '../../minerva.less/minerva.variables';
@import 'mediawiki.mixins.animation';
@animationDuration: 0.3s;
// Last modified bar styles
.last-modified-bar {
&.active {
background-color: @lastModifiedBarActiveBackgroundColor;
color: #fff;
a {
color: #fff;
}
}
}
@-webkit-keyframes fadeInImage {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInImage {
from {
opacity: 0;
}
to {
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 );
}