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

懒加载对于存在比较多图片的网页加速效果是比较明显的，但是使用懒加载后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 %}