Lazy loading
什么叫懒加载：
惰性加载（英语：lazy loading、infinite scroll，又称延迟加载、懒加载、无限滚动、瀑布流），是一种设计模式，被运用在软件设计和网页设计当中，对于网页界面，其特征为用户透过鼠标，滚动浏览页面，直到页面下方时，就会自动加载更多内容；有多数网站采用这项网页设计，例如Google图片搜索、Google+、Facebook、Twitter、Pinterest和维基百科的Flow讨论系统。也有结合无限滚动和多页，两者特性的网页设计。而对于数据结构而言，惰性加载是指从一个数据对象通过方法获得里面的一个属性对象时，这个对应对象实际并没有随其父数据对象创建时一起保存在运行空间中，而是在其读取方法第一次被调用时才从其他数据源中加载到运行空间中，这样可以避免过早地导入过大的数据对象但并没有使用的空间占用浪费。
说人话就是指在网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。
可见懒加载对于比较多图片的网页加速效果是明显的，但是使用懒加载后Markdown的写法会麻烦一点。
常用的懒加载懒人包有：
这里分享几个使用懒加载后Markdown的书写方法。 懒加载原理是将真实的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，再将自定义属性中的地址存储到src属性中，以达到加速网页载入的效果。我这里使用的是lazysizes。
那么首先你应该在你的页面里引入这个js
<script type="text/javascript" async src="/assets/js/lazysizes.min.js"></script>
第一种写法，也是最基本的html的写法
<img data-src="image.jpg" class="lazyload" />
还可以写成响应式的
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
视频也能搞定
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
第二种写法，即把html转化为Markdown的语法
![image](){: class="lazyload" data-src="assets/img/image.jpg"}
开始划重点
可以看到以上两种在Markdown里面使用懒加载的写法实在复杂，我只是想插个图片而已，这样一搞那我岂不是要把所有的图片重写，那么有么有简单的写法呢？
第三种写法，具有懒人精神的写法
因为Jekyll是支持liquid的，并且我们写的md文件最终都被转换为html格式的了，其在post.html中就是content这个变量，翻一翻Liquid文档可以看到，liquid有一个replace方法，那么我们就直接修改post.html把文章的特定内容替换掉好了。
*注意：这句话要放到{{ content }}的上方
{% assign content = content | replace: "<img src", "<img class='lazyload' data-src" %}
这句话的意思是，定义一个变量叫content，然后它的值是把原来那个content的“img”标签的部分内容替换为我们上面提到过的懒加载写法，也就是加一个class属性然后把img标签的src替换为data-src。
更进一步，虽然这样已经可以用了，但是当图片未加载完的时候始终显示的是文字占位符，这样并不好看，我们可以把它换成一个loading的图片。但是这个图片一定要小，要加载得很快，可以写base64，也可以用gif，啥都可以，但是注意一定要小。 我这里建议去loading.io下载。
这是我的loading.gif，一个不到40k的动图，需要的可以自己下载。
这时应该更新上面的写法
{% assign content = content | replace: "<img src", "<img class='lazyload' src='/assets/img/loading.gif' data-src" %}
如此一来，所有的文章图片都不用改了，以后插图片还是按照正常的格式去写。
