f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

Lazy load the image of posts.

Browse Source
This commit is contained in:
Cotes Chung
2019-11-24 17:38:41 +08:00
parent 81721ef295
commit 9e67a9dc22
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
_layouts/post.html
View File

@@ -42,12 +42,21 @@ layout: default
{% endif %}
</div> <!-- .post-meta -->
{% capture post_content %}
<div class="post-content">
{% if page.image %}
<img src="{{ page.image }}" class="img-rounded">
{% endif %}
{{ content }}
</div><!-- .post-content -->
</div>
{% endcapture %}
<!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
{% if post_content contains '<img src=' %}
{{ post_content | replace: '<img src=', '<img class="lozad" data-src=' }}
{% else %}
{{ post_content }}
{% endif %}
<div class="post-tail text-muted">
<!-- Tags -->
@@ -97,3 +106,9 @@ layout: default
</div> <!-- div.col-12..col-lg-11.col-xl-8 -->
{% include panel.html %}
<!-- image lazy load -->
<script type="text/javascript">
const observer = lozad();
observer.observe();
</script>