asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: optimize LQIP loading

Browse source 
- add blur effect for external WebP format LQIP
- remove the timeout delay
This commit is contained in:
Cotes Chung 2023-10-04 18:07:10 +08:00
parent 55659315c6
commit 2bc3172444
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
2 changed files with 34 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_includes/refactor-content.html
View file

@ -120,13 +120,13 @@
{% endunless %} {% endunless %}
{% if _lqip %} {% if _lqip %}
{% if _lqip contains 'data:' %} {% assign _lazyload = false %}
{% assign _lazyload = false %} {% assign _class = _class | append: ' blur' %}
{% assign _class = _class | append: ' blur' %}
{% else %} {% unless _lqip contains 'data:' %}
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %} {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
{% assign _left = _left | replace: 'lqip="', _lqip_alt %} {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
{% endif %} {% endunless %}
<!-- add image placeholder --> <!-- add image placeholder -->
{% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %} {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}

58
_javascript/modules/components/img-loading.js
View file

@ -4,27 +4,37 @@
const ATTR_DATA_SRC = 'data-src'; const ATTR_DATA_SRC = 'data-src';
const ATTR_DATA_LQIP = 'data-lqip'; const ATTR_DATA_LQIP = 'data-lqip';
const C_SHIMMER = 'shimmer';
const C_BLUR = 'blur'; const cover = {
SHIMMER: 'shimmer',
BLUR: 'blur'
};
function removeCover(clzss) {
$(this).parent().removeClass(clzss);
}
function handleImage() { function handleImage() {
const $img = $(this); if (!this.complete) {
return;
}
if (this.hasAttribute(ATTR_DATA_LQIP) && this.complete) { if (this.hasAttribute(ATTR_DATA_LQIP)) {
$img.parent().removeClass(C_BLUR); removeCover.call(this, cover.BLUR);
} else { } else {
$img.parent().removeClass(C_SHIMMER); removeCover.call(this, cover.SHIMMER);
} }
} }
/* Switch LQIP with real image url */ /**
function switchLQIP(img) { * Switches the LQIP with the real image URL.
// Sometimes loaded from cache without 'data-src' */
if (img.hasAttribute(ATTR_DATA_SRC)) { function switchLQIP() {
const $img = $(img); const $img = $(this);
const dataSrc = $img.attr(ATTR_DATA_SRC); const src = $img.attr(ATTR_DATA_SRC);
$img.attr('src', encodeURI(dataSrc));
} $img.attr('src', encodeURI(src));
$img.removeAttr(ATTR_DATA_SRC);
} }
export function loadImg() { export function loadImg() {
@ -34,28 +44,18 @@ export function loadImg() {
$images.on('load', handleImage); $images.on('load', handleImage);
} }
/* Images loaded from the browser cache do not trigger the 'load' event */ // Images loaded from the browser cache do not trigger the 'load' event
$('article img[loading="lazy"]').each(function () { $('article img[loading="lazy"]').each(function () {
if (this.complete) { if (this.complete) {
$(this).parent().removeClass(C_SHIMMER); removeCover.call(this, cover.SHIMMER);
} }
}); });
// LQIPs set by the data URI or WebP will not trigger the 'load' event,
// so manually convert the URI to the URL of a high-resolution image.
const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`); const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`);
if ($lqips.length) { if ($lqips.length) {
const isHome = $('#post-list').length > 0; $lqips.each(switchLQIP);
$lqips.each(function () {
if (isHome) {
// JavaScript runs so fast that LQIPs in home page will never be detected
// Delay 50ms to ensure LQIPs visibility
setTimeout(() => {
switchLQIP(this);
}, 50);
} else {
switchLQIP(this);
}
});
} }
} }