当你的网站使用了大量图片时候，如果一次性全部加载，那么会严重影响网站的速度。通过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