Preventing image reflow (fix #351)

This commit is contained in:
Cotes Chung 2021-06-30 19:08:42 +08:00
parent 08ec6cd3b5
commit 6d1d440c00
4 changed files with 55 additions and 12 deletions

View file

@ -35,8 +35,10 @@
%}
{% endif %}
{% if _content contains '<img src="' %}
<!-- add CDN prefix if it exists -->
{% if site.img_cdn != '' %}
{% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
{% else %}
@ -46,16 +48,53 @@
{% assign _content = _content | replace: '<img src="/', img_path_replacement %}
<!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
{% assign img_placehodler
= 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
{% assign _content = _content | replace: '<img src="', '<img data-src="' %}
{% assign lozad_replacement = '<img src="'
| append: img_placehodler
| append: '" data-src="' %}
<!-- add image placehoder to prevent layout reflow -->
{% assign _content = _content | replace: '<img src="', lozad_replacement %}
{% assign _img_content = nil %}
{% assign _images = _content | split: '<img ' %}
{% for _img in _images %}
{% if forloop.first %}
{% assign _img_content = _img %}
{% continue %}
{% endif %}
{% assign _width = nil %}
{% assign _height = nil %}
{% assign _attrs = _img | split: '>' | first | split: ' ' %}
{% for _attr in _attrs %}
{% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
{% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
{% case _key %}
{% when 'width' %}
{% assign _width = _value %}
{% when 'height' %}
{% assign _height = _value %}
{% endcase %}
{% if _width and _height %}
{% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
{% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
{% break %}
{% endif %}
{% endfor %}
{% unless _width and _height %}
{% assign _img_content = _img_content | append: '<img ' | append: _img %}
{% endunless %}
{% endfor %}
{% assign _content = _img_content %}
{% endif %}
<!-- return -->
{{ _content }}

View file

@ -11,10 +11,10 @@ $(function() {
return;
}
/* lozy loading */
/* lazy loading */
const imgs = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
const observer = lozad(imgs);
const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
const observer = lozad(imgList);
observer.observe();
/* popup */
@ -40,9 +40,8 @@ $(function() {
}
});
/* markup the image links */
$(`${IMG_SCOPE} a`).has("img").addClass('img-link');
});

View file

@ -44,7 +44,11 @@ layout: default
<div class="post-content">
{% if page.image.src %}
<img src="{{ page.image.src }}" class="preview-img" alt="{{ page.image.alt | default: "Preview Image" }}">
<img src="{{ page.image.src }}"
class="preview-img"
alt="{{ page.image.alt | default: "Preview Image" }}"
{% if page.image.width %}width="{{ page.image.width }}"{% endif %}
{% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
{% endif %}
{{ content }}

View file

@ -107,6 +107,7 @@ a {
img {
max-width: 100%;
height: auto;
}
blockquote {