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);
}
}