什么是懒加载？
在Web开发中经常会遇到一些性能问题，有很多原因就是因为一次性请求过多导致的，而懒加载是一种在不影响原有界面，当界面需要展现给用户才进行加载和请求，常见的就是图片的加载，在很多电商页面中最常见，通过懒加载的方式提升了页面的性能，用户体验也会更好了。
为什么使用lozad.js
现有的延迟加载库依赖窗体的滚动事件，或者使用定期计时器并调用在需要延迟加载的元素上getBoundingClientRect()。然而，这种方法非常缓慢，因为每次调用getBoundingClientRect()强制浏览器重新布局整个页面而lozad.js不依赖这些，因此性能很好。
lozad.js介绍
- Github地址
https://github.com/ApoorvSaxena/lozad.js
lozad.js是使用纯JavaScript实现的不借助图像或iframe的高性能且轻量级可配置延迟加载器，它的思想是观察者模式
特点
- 纯js实现
- 非常轻量，压缩后只有1.04kb
- 零依赖
- 允许延迟加载动态添加的元素
- 支持图片、iframe、视频、音频、背景图片等
- 免费开源
最新版本在于有基础上性能得到了极大地提升。
安装使用
- 安装
npm install --save lozad
//OR
yarn add lozad
//OR
bower install lozad
- 使用
// using ES6 模块
import lozad from 'lozad'
// using CommonJS 模块
var lozad = require('lozad')
或者直接引用cdn或本地js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
举例：
html：
<img class="lozad" data-src="image.png" />
js:
const observer = lozad(); // '.lozad'作为默认类选择器
observer.observe();
自己引入dom：
const el = document.querySelector('img');
const observer = lozad(el);
document.querySelectorAll()
observer.observe();
自定义配置：
const observer = lozad('.lozad', {
rootMargin: '10px 0px',
threshold: 0.1
});
observer.observe();
背景图片：
<div class="lozad" data-background-image="image.png">
</div>
IFrame：
<iframe data-src="embed.html" class="lozad"></iframe>
更多使用实例参考Github，提供了图片、背景图等使用方式
浏览器支持
支持大多数浏览器，如果不支持需要引入polyfill
总结
提升Web页面的性能方法多种多样，懒加载就是其中一种，如果你追求极致的性能，不妨试一试lozadjs，期待对你有所帮助！