refactor(core): optimize image loading
- JavaScript runs so fast that LQIP will never be detected - Increase the running priority of image processing in posts Enhancement for #1267
This commit is contained in:
parent
b489da89ca
commit
e3b01636ac
4 changed files with 56 additions and 24 deletions
|
@ -81,6 +81,7 @@
|
||||||
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
|
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
|
||||||
{% assign _attrs = _left | split: '" ' %}
|
{% assign _attrs = _left | split: '" ' %}
|
||||||
|
|
||||||
|
{% assign _src = null %}
|
||||||
{% assign _lqip = null %}
|
{% assign _lqip = null %}
|
||||||
{% assign _class = null %}
|
{% assign _class = null %}
|
||||||
|
|
||||||
|
@ -119,8 +120,9 @@
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
|
|
||||||
{% if _lqip %}
|
{% if _lqip %}
|
||||||
{% if _lqip contains ':' %}
|
{% if _lqip contains 'data:' %}
|
||||||
{% assign _lazyload = false %}
|
{% assign _lazyload = false %}
|
||||||
|
{% assign _class = _class | append: ' blur' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% 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 %}
|
||||||
|
|
|
@ -2,30 +2,60 @@
|
||||||
* Setting up image lazy loading and LQIP switching
|
* Setting up image lazy loading and LQIP switching
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function loadImg() {
|
const ATTR_DATA_SRC = 'data-src';
|
||||||
const $images = $('main img[loading="lazy"]');
|
const ATTR_DATA_LQIP = 'data-lqip';
|
||||||
const $lqip = $('main img[data-lqip="true"]');
|
const C_SHIMMER = 'shimmer';
|
||||||
|
const C_BLUR = 'blur';
|
||||||
|
|
||||||
if ($images.length > 0) {
|
function handleImage() {
|
||||||
$images.on('load', function () {
|
const $img = $(this);
|
||||||
/* Stop shimmer when image loaded */
|
|
||||||
$(this).parent().removeClass('shimmer');
|
|
||||||
});
|
|
||||||
|
|
||||||
$images.each(function () {
|
if (this.hasAttribute(ATTR_DATA_LQIP) && this.complete) {
|
||||||
/* Images loaded from the browser cache do not trigger the 'load' event */
|
$img.parent().removeClass(C_BLUR);
|
||||||
if ($(this).prop('complete')) {
|
} else {
|
||||||
$(this).parent().removeClass('shimmer');
|
$img.parent().removeClass(C_SHIMMER);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($lqip.length > 0) {
|
|
||||||
$lqip.each(function () {
|
|
||||||
/* Switch LQIP with real image url */
|
/* Switch LQIP with real image url */
|
||||||
const dataSrc = $(this).attr('data-src');
|
function switchLQIP(img) {
|
||||||
$(this).attr('src', encodeURI(dataSrc));
|
// Sometimes loaded from cache without 'data-src'
|
||||||
$(this).removeAttr('data-src data-lqip');
|
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 = $('article img');
|
||||||
|
|
||||||
|
if ($images.length) {
|
||||||
|
$images.on('load', handleImage);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,6 @@ import {
|
||||||
toc
|
toc
|
||||||
} from './modules/plugins';
|
} from './modules/plugins';
|
||||||
|
|
||||||
basic();
|
|
||||||
initSidebar();
|
initSidebar();
|
||||||
initTopbar();
|
initTopbar();
|
||||||
loadImg();
|
loadImg();
|
||||||
|
@ -15,3 +14,4 @@ imgPopup();
|
||||||
initLocaleDatetime();
|
initLocaleDatetime();
|
||||||
initClipboard();
|
initClipboard();
|
||||||
toc();
|
toc();
|
||||||
|
basic();
|
||||||
|
|
|
@ -71,9 +71,9 @@ a {
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
transition: all 0.7s ease-in-out;
|
transition: all 0.35s ease-in-out;
|
||||||
|
|
||||||
&[data-lqip='true'] {
|
.blur & {
|
||||||
$blur: 20px;
|
$blur: 20px;
|
||||||
|
|
||||||
-webkit-filter: blur($blur);
|
-webkit-filter: blur($blur);
|
||||||
|
|
Loading…
Reference in a new issue