Jekyll Jekyll使用懒加载后图片的Markdown书写语法

本文总共 721 字 · 阅读全文大约需要 3 分钟
(2019-11-14) @Sleepyhead    


懒加载对于存在比较多图片的网页加速效果是比较明显的,但是使用懒加载后Markdown的写法会麻烦一些,这里分享几个使用懒加载后Markdown的书写方法。 懒加载原理是将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗口时,再将自定义属性中的地址存储到src属性中。达到加速网页载入的效果。本站使用的是lazysizes.js

lazysizes.js

第一种写法

但是很长有没有!!

![normal](){: class="lazyload" data-src="/markdown-img-syntax/11.14.1.jpg"}

第二种写法

按照默认Markdown语法来写即可

![lazy-md-syntax](/markdown-img-syntax/11.14.1.jpg)
  • 2.1

  • post.html里面添加以下语句
{% assign content = content | replace: '<img src="', '<img class="lazyload" data-src="' %}
  • 2.2

  • 如果你有固定图床可以参考下面

  • _config.yml里面添加以下语句
imgurl: "你的图床前缀"
  • post.html里面添加以下语句
{% assign lazyimg = '<img class="lazyload" data-src="' | append: site.imgurl %}
{% assign content = content | replace: '<img src="', lazyimg %}

推荐