Preventing image reflow (fix #351)
This commit is contained in:
parent
08ec6cd3b5
commit
6d1d440c00
4 changed files with 55 additions and 12 deletions
|
@ -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 }}
|
||||
|
|
|
@ -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');
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -107,6 +107,7 @@ a {
|
|||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
Loading…
Reference in a new issue