JS图片懒加载插件lozad.js

简介

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

效果演示：  https://apoorv.pro/lozad.js/demo/