StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-28 08:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Low quality lazyload placeholder

Browse source
This commit is contained in:
alistair3149 2019-08-15 22:48:10 -04:00
parent 6790081313
commit f50789508c
4 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
includes/CitizenHooks.php
View file

@ -48,13 +48,16 @@ class CitizenHooks {
// Set lazy class for the img // Set lazy class for the img
$attribs['class'] = 'lazy'; $attribs['class'] = 'lazy';
// Native API // Native API
$attribs['loading'] = 'lazy'; $attribs['loading'] = 'lazy';
$attribs['data-src'] = $attribs['src']; $attribs['data-src'] = $attribs['src'];
$attribs['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; // Replace src with small size image
$attribs['src'] = preg_replace('/\/+(\d+)px-/s', '/10px-', $attribs['src']);
// $attribs['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
if (isset($attribs['srcset'])) { if (isset($attribs['srcset'])) {
$attribs['data-srcset'] = $attribs['srcset']; $attribs['data-srcset'] = $attribs['srcset'];
unset($attribs['srcset']); unset($attribs['srcset']);

30
resources/components/common.less
View file

@ -523,7 +523,7 @@ a {
// Namespace button // Namespace button
#p-namespaces { #p-namespaces {
position: relative; position: relative;
float: right; float: right;
margin: 0 @negative-margin; margin: 0 @negative-margin;
padding: @margin-side; padding: @margin-side;
@ -671,17 +671,33 @@ figcaption,
} }
.thumb { .thumb {
>.thumbinner>a.new { >.thumbinner {
display: block; >a {
padding: @margin-side / 2; display: block;
background-color: @base-80; overflow: hidden;
font-size: @content-caption-size;
&.new {
padding: @margin-side / 2;
background-color: @base-80;
font-size: @content-caption-size;
}
}
} }
} }
.image img {
filter: none;
transition: @transition-filter;
&.lazy {
background-color: @base-90;
filter: blur(20px);
}
}
// Hide edit button when user is not logged in // Hide edit button when user is not logged in
.not-logged .mw-editsection { .not-logged .mw-editsection {
display: none!important; display: none !important;
} }
@media only screen and (max-width: @screen0) { @media only screen and (max-width: @screen0) {

2
resources/scripts/lazyload.js
View file

@ -13,6 +13,7 @@ if ("loading" in HTMLImageElement.prototype) {
if (img.hasAttribute("data-srcset")) { if (img.hasAttribute("data-srcset")) {
img.setAttribute("srcset", img.getAttribute("data-srcset")); img.setAttribute("srcset", img.getAttribute("data-srcset"));
} }
img.classList.remove("lazy");
}); });
} else { } else {
// IntersectionObserver API // IntersectionObserver API
@ -27,6 +28,7 @@ if ("loading" in HTMLImageElement.prototype) {
if (change.target.hasAttribute("data-srcset")) { if (change.target.hasAttribute("data-srcset")) {
change.target.setAttribute("srcset", change.target.getAttribute("data-srcset")); change.target.setAttribute("srcset", change.target.getAttribute("data-srcset"));
} }
change.target.classList.remove("lazy");
observer.unobserve(change.target); observer.unobserve(change.target);
} }
}); });

1
resources/variables.less
View file

@ -100,6 +100,7 @@
@transition-box-shadow: box-shadow 0.55s ease; @transition-box-shadow: box-shadow 0.55s ease;
@transition-box-shadow-quick: box-shadow 0.2s ease; @transition-box-shadow-quick: box-shadow 0.2s ease;
@transition-border-color: border-color 0.55s ease; @transition-border-color: border-color 0.55s ease;
@transition-filter: filter 0.55s ease;
/* /*
* Fonts * Fonts