Lazy load the feature image.

This commit is contained in:
Cotes Chung 2020-09-20 17:58:52 +08:00
parent 8484a34195
commit f932cf0d00

View file

@ -62,13 +62,18 @@ layout: default
<div class="post-content"> <div class="post-content">
{%- capture img_placehodler -%}
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
{% endcapture%}
{% if page.image %} {% if page.image %}
<img src="{{ page.image }}" class="post-preview-img"> <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
{% endif %} {% endif %}
<!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> --> <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
{% if content contains '<img src=' %} {% if content contains '<img src=' %}
{{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }} {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
{{ content | replace: '<img src=', replacement }}
{% else %} {% else %}
{{ content }} {{ content }}
{% endif %} {% endif %}