diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index b035ef7..36352b0 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -81,6 +81,7 @@
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% assign _attrs = _left | split: '" ' %}
+ {% assign _src = null %}
{% assign _lqip = null %}
{% assign _class = null %}
@@ -119,8 +120,9 @@
{% endunless %}
{% if _lqip %}
- {% if _lqip contains ':' %}
+ {% if _lqip contains 'data:' %}
{% assign _lazyload = false %}
+ {% assign _class = _class | append: ' blur' %}
{% else %}
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
{% assign _left = _left | replace: 'lqip="', _lqip_alt %}
diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js
index 18ed3ac..07288a8 100644
--- a/_javascript/modules/components/img-loading.js
+++ b/_javascript/modules/components/img-loading.js
@@ -2,30 +2,60 @@
* Setting up image lazy loading and LQIP switching
*/
+const ATTR_DATA_SRC = 'data-src';
+const ATTR_DATA_LQIP = 'data-lqip';
+const C_SHIMMER = 'shimmer';
+const C_BLUR = 'blur';
+
+function handleImage() {
+ const $img = $(this);
+
+ if (this.hasAttribute(ATTR_DATA_LQIP) && this.complete) {
+ $img.parent().removeClass(C_BLUR);
+ } else {
+ $img.parent().removeClass(C_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));
+ }
+}
+
export function loadImg() {
- const $images = $('main img[loading="lazy"]');
- const $lqip = $('main img[data-lqip="true"]');
+ const $images = $('article img');
- if ($images.length > 0) {
- $images.on('load', function () {
- /* Stop shimmer when image loaded */
- $(this).parent().removeClass('shimmer');
- });
+ if ($images.length) {
+ $images.on('load', handleImage);
+ }
- $images.each(function () {
- /* Images loaded from the browser cache do not trigger the 'load' event */
- if ($(this).prop('complete')) {
- $(this).parent().removeClass('shimmer');
+ /* 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);
+ }
+ });
+
+ 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);
}
});
}
-
- if ($lqip.length > 0) {
- $lqip.each(function () {
- /* Switch LQIP with real image url */
- const dataSrc = $(this).attr('data-src');
- $(this).attr('src', encodeURI(dataSrc));
- $(this).removeAttr('data-src data-lqip');
- });
- }
}
diff --git a/_javascript/post.js b/_javascript/post.js
index dc6e28c..86ea32b 100644
--- a/_javascript/post.js
+++ b/_javascript/post.js
@@ -7,7 +7,6 @@ import {
toc
} from './modules/plugins';
-basic();
initSidebar();
initTopbar();
loadImg();
@@ -15,3 +14,4 @@ imgPopup();
initLocaleDatetime();
initClipboard();
toc();
+basic();
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 812d7d5..c80d412 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -71,9 +71,9 @@ a {
img {
max-width: 100%;
height: auto;
- transition: all 0.7s ease-in-out;
+ transition: all 0.35s ease-in-out;
- &[data-lqip='true'] {
+ .blur & {
$blur: 20px;
-webkit-filter: blur($blur);