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 %}
{% if _lqip %}
{% if _lqip contains 'data:' %}
{% assign _lazyload = false %}
{% assign _class = _class | append: ' blur' %}
{% else %}
{% assign _lazyload = false %}
{% assign _class = _class | append: ' blur' %}
{% unless _lqip contains 'data:' %}
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
{% assign _left = _left | replace: 'lqip="', _lqip_alt %}
{% endif %}
{% endunless %}
<!-- add image placeholder -->
{% 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_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() {
const $img = $(this);
if (!this.complete) {
return;
}
if (this.hasAttribute(ATTR_DATA_LQIP) && this.complete) {
$img.parent().removeClass(C_BLUR);
if (this.hasAttribute(ATTR_DATA_LQIP)) {
removeCover.call(this, cover.BLUR);
} else {
$img.parent().removeClass(C_SHIMMER);
removeCover.call(this, cover.SHIMMER);
}
}
/* Switch LQIP with real image url */
function switchLQIP(img) {
// Sometimes loaded from cache without 'data-src'
if (img.hasAttribute(ATTR_DATA_SRC)) {
const $img = $(img);
const dataSrc = $img.attr(ATTR_DATA_SRC);
$img.attr('src', encodeURI(dataSrc));
}
/**
* Switches the LQIP with the real image URL.
*/
function switchLQIP() {
const $img = $(this);
const src = $img.attr(ATTR_DATA_SRC);
$img.attr('src', encodeURI(src));
$img.removeAttr(ATTR_DATA_SRC);
}
export function loadImg() {
@ -34,28 +44,18 @@ export function loadImg() {
$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 () {
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"]`);
if ($lqips.length) {
const isHome = $('#post-list').length > 0;
$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);
}
});
$lqips.each(switchLQIP);
}
}