JS图片懒加载|响应式延迟加载插件lazysizes.js

简介

通过 lazysizes.js 插件能很好解决图片延迟加载问题，它可以实现图片的延迟加载，也就是说，当网页很长时，只加载用户视窗内的图片，而视窗外的图片会等到你拖动滚动条至后面才加载。这样就有效避免了图片过度网站加载慢的问题了，能够提升整个网站的访问速度和用户体验，特别是网站的图片比较多的站点。

使用 lazysizes.js 插件，不需要引用其他三方 js 库，直接使用即可，能很方便的集成到我们项目中，而且该插件体积大约 5.8KB，很轻量级。在响应式布局、移动端开发时，增强用户体验，免造成用户流量的损失。

使用

1.  引入文件

< 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. 响应式加载

<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>

相关链接

官方文档地址 ： https://github.com/aFarkas/lazysizes#readme

GitHub 地址 ：  https://github.com/topics/lazysizes

npm 地址 ：  https://www.npmjs.com/package/lazysizes