站点的专题图片稍有点大，恩，其实主要是服务器的带宽过小。导致访问的时候图片加载过慢，页眉部分会空出一块，直到加载结束。于是就想参照joe主题的样式，做一个图片懒加载的效果。joe主题使用了lazysizes实现图片的懒加载。于是查询了一下lazysizes的相关资料，找到了它的github地址：
https://github.com/aFarkas/lazysizes机译的lazysizes插件简介
lazysizes是一个快速（无卡顿），SEO友好和自初始化的lazyloader，用于图像（包括响应式图像图片/ srcset），iframe，脚本/小部件等等。它还通过区分关键的视图和近视图元素来确定资源的优先级，以提高感知性能。
它也可能成为您集成响应式图像的首选工具。它可以自动计算响应式图像的尺寸属性，它允许您与CSS共享媒体属性的媒体查询，有助于将布局（CSS）与内容/结构（HTML）分开，并使响应式图像集成到任何环境中变得非常简单。它还包括一组可选插件，以进一步扩展其功能。
直白的个人理解
插件的使用非常简单，仅需要为实现懒加载的图片添加一个“lazyload”的类属性，被添加该属性的图片会被插件自动识别，并根据不同阶段赋予该图片不同的类明，比如某图片读取完成之后，该类名会被变更为“lazyloaded”：
<img class="lazyload" src="动态加载图片" data-src="真实图片地址">一个真实应用的案例如上，动态加载图博主用了joe主题的，翻滚的图标看起来很酷炫，data-src属性则填写图片的真实地址，在图片未读取完成前，页面会先展现动图占位，直至图片加载完成，插件自动将data-src中的真实图片地址赋予src，完成图片替换的同时，也实现了类名的变更。
个人失败经验
在替换文章列表属性的时候，不小心把“data-src”属性名误写成了“date-src”，导致文章列表的缩略图一水展示动态加载图片，如果亲也遇到这样的问题，可以检查一下各属性名是否有误。
