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:
Cotes Chung 2023-09-29 05:07:03 +08:00
parent b489da89ca
commit e3b01636ac
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
4 changed files with 56 additions and 24 deletions

View file

@ -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 %}

View file

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

View file

@ -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();

View file

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