简介

Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器，其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后，仅仅535字节大小，相对于常用的jquery.lazyload.js来说，lozad.js实力碾压，虽然jquery.lazyload.js也才几kb大小。

使用

1.  引入 Lozad.js 文件

2.  HTML

<img />

3.  调用

// 基础使用
const observer = lozad(); // 元素默认为 '.lozad'
observer.observe();

// 个性配置
const observer = lozad('.lozad',{
    rootMargin: '30px 0px',
    threshold: 1
});
observer.observe();

// 添加生命周期
const observer = lozad('.lozad', {
    load: function(el) { // 生命周期：加载图片前
        console.log(el.getAttribute('>        // 需要自定义图片src
        el.src = el.getAttribute('>    },
    loaded: function (el) { // 加载完毕，实际图片还在pending中，页面还没显示图片
        console.log(el.getAttribute('>        console.log(el)
    }
})
observer.observe() // 加载，如果有新图片加入，再次执行即可

相关链接

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

GitHub 地址 ：https://github.com/ApoorvSaxena/lozad.js