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

<img
data-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，很轻量级。在响应式布局、移动端开发时，增强用户体验，免造成用户流量的损失。

链接: https://www.fly63.com/article/detial/573