当你的网站使用了大量图片时候，如果一次性全部加载，那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题，它可以实现图片的延迟加载，也就是说：当网页很长时，只价值用户视窗内的图片，而视窗外的图片会等到你拖动滚动条至后面才加载。这样就优秀避免了图片过度网站加载慢的问题了，下面将介绍如何使用lazysizes.js。
lazysizes.js使用方法
1.安装lazysizes：
npm install lazysizes --save //npm安装
bower install lazysizes --save //bower安装
或者可以直接下载lazysizes.min.js脚本并在您的网页中添加，如下：
<script src="lazysizes.min.js"></script>
2、懒加载方式：
lazysizes不需要任何JS配置，只需要在img标签中添加class="lazyload"就可以了，目前lazysizes支持四种懒加载方式，如下。
1、无响应默认加载：
<img data-src="img.jpg" class="lazyload" width="500" height="500"/>
2、从模糊到清晰的加载：
<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>
3、响应式加载：
<imgdata-sizes=”auto”data-src=”image2.jpg”data-srcset=”image1.jpg 300w,image2.jpg 600w,image3.jpg 900w” class=”lazyload” />
4、iframe的方式：
<iframe frameborder=”0″
class=”lazyload”
allowfullscreen=””
data-src=”//”>
</iframe>
总结：
使用lazysizes.js插件，不需要引用其他三方js库，直接使用即可，能很方便的集成到我们项目中，而且该插件体积大约5.8KB，很轻量级。在响应式布局、移动端开发时，增强用户体验，免造成用户流量的损失。
这个开源的库也有6406个star，好处在于他是原生js实现，不依赖于jquery/zepto， 自动监测可能发生变化的 lazyload 节点，不需要额外初始化， 并且支持响应式图片 srcset， 性能高，改善seo。强烈推荐！！！
原文地址：http://www.fly63.com/article/detial/573
