lazysizes.js使用方法 - lishuwenMZL/- GitHub Wiki
当你的网站使用了大量图片时候，如果一次性全部加载，那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题，它可以实现图片的延迟加载，也就是说：当网页很长时，只价值用户视窗内的图片，而视窗外的图片会等到你拖动滚动条至后面才加载。这样就优秀避免了图片过度网站加载慢的问题了，下面将介绍如何使用lazysizes.js。
详情网址见下：http://www.fly63.com/article/detial/573
- 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支持四种懒加载方式，如下。
- 无响应默认加载：
- 从模糊到清晰的加载：
- 响应式加载：
- iframe的方式：
- 总结：
使用lazysizes.js插件，不需要引用其他三方js库，直接使用即可，能很方便的集成到我们项目中，而且该插件体积大约5.8KB，很轻量级。在响应式布局、移动端开发时，增强用户体验，免造成用户流量的损失。