From 2bc317244431acbb6b80a09a3848983ff5656b6a Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:07:10 +0800 Subject: [PATCH] refactor: optimize LQIP loading - add blur effect for external WebP format LQIP - remove the timeout delay --- _includes/refactor-content.html | 10 ++-- _javascript/modules/components/img-loading.js | 58 +++++++++---------- 2 files changed, 34 insertions(+), 34 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 36352b0..9d4e679 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -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 %} {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %} diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js index 07288a8..c9b7b7f 100644 --- a/_javascript/modules/components/img-loading.js +++ b/_javascript/modules/components/img-loading.js @@ -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); } }