StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 14:34:09 +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
$attribs['class'] = 'lazy';
// Native API
$attribs['loading'] = 'lazy';
$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'])) {
$attribs['data-srcset'] = $attribs['srcset'];
unset($attribs['srcset']);

30
resources/components/common.less
View file

@ -523,7 +523,7 @@ a {
// Namespace button
#p-namespaces {
position: relative;
position: relative;
float: right;
margin: 0 @negative-margin;
padding: @margin-side;
@ -671,17 +671,33 @@ figcaption,
}
.thumb {
>.thumbinner>a.new {
display: block;
padding: @margin-side / 2;
background-color: @base-80;
font-size: @content-caption-size;
>.thumbinner {
>a {
display: block;
overflow: hidden;
&.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
.not-logged .mw-editsection {
display: none!important;
display: none !important;
}
@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")) {
img.setAttribute("srcset", img.getAttribute("data-srcset"));
}
img.classList.remove("lazy");
});
} else {
// IntersectionObserver API
@ -27,6 +28,7 @@ if ("loading" in HTMLImageElement.prototype) {
if (change.target.hasAttribute("data-srcset")) {
change.target.setAttribute("srcset", change.target.getAttribute("data-srcset"));
}
change.target.classList.remove("lazy");
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-quick: box-shadow 0.2s ease;
@transition-border-color: border-color 0.55s ease;
@transition-filter: filter 0.55s ease;
/*
* Fonts