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

5
includes/CitizenHooks.php
View file

@ -54,7 +54,10 @@ class CitizenHooks {
$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']);

18
resources/components/common.less
View file

@ -671,13 +671,29 @@ figcaption,
}
.thumb {
>.thumbinner>a.new {
>.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 {

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