juejin-lazyload

掘金 图片延迟加载插件。

机制

起始状态

<img data-src="pic.jpg">
<div data-src="pic.jpg"></div>

初始化

<img data-src="pic.jpg" class="inited" src="[placeholder]">
<div data-src="pic.jpg" class="inited"></div>

加载中

<img data-src="pic.jpg" class="inited loading" src="[placeholder]">
<div data-src="pic.jpg" class="inited loading"></div>

[placeholder] 为透明占位 SVG 的 Data URL（data:image/svg+xml,...），其宽高由 infoGetter 得到，不指定则无占位。使用透明占位 SVG 可以使 IMG 元素得到与加载成功状态相同的尺寸布局表现以防止页面跳动。

加载成功

<img data-src="pic.jpg" class="inited loaded" src="pic.jpg">
<div data-src="pic.jpg" class="inited loaded" style="background-image:url(pic.jpg)"></div>

加载失败

<img data-src="pic.jpg" class="inited error" src="[placeholder]">
<div data-src="pic.jpg" class="inited error"></div>

为防止失败时页面跳动，占位 SVG 保持不变。

建议

加载中及加载失败推荐根据状态类来自定义样式，比如使用 background-image 来显示表示正在加载的动图。

状态变化钩子 onStateChange 可以用来应对更自由的需求，比如使自定义结构下 IMG 元素图片渐显。

安装

npm i -S juejin-lazyload

使用

初始化

模块化环境

import JuejinLazyload from 'juejin-lazyload'

const lazyload = new JuejinLazyload(...)

浏览器直引

<script src="path/to/juejin-lazyload.min.js"></script>

var lazyload = new JuejinLazyload(...)

构造参数

new JuejinLazyload(Element || ElementList || selector, {
  // 加载区域与可视区域之差
  threshold: 0,

  // 状态更新的最小时间间隔
  interval: 200,

  // 是否启用防抖，待可视状态变化停止时才更新图片状态
  debounce: false,

  // 是否自动监听 window 的 scroll 和 resize 事件
  reactive: true,

  // true - 图片头部加载完成后立即显示 | false - 全图加载完成后才显示
  eagerShowing: false,

  // 初始化及 addOrUpdateElement 时调用
  infoGetter: (Element) => ({
    url: String,   // 图片地址，用以设置 IMG 元素的 src 或其它元素的 background-image
    width: Number, // 图片宽度，用以设置加载时透明占位 SVG 宽度
    height: Number // 图片高度，用以设置加载时透明占位 SVG 高度
  }),

  // 可视区域，默认为文档可视区域
  visibleAreaGetter: () => DOMRect,

  // 状态变化钩子，state = 'inited' || 'loading' || 'loaded' || 'error'
  onStateChange: (state, url, Element, JuejinLazyload) => {}
})

图片元素状态类

inited  # 已初始化
loading # 正在加载
loaded  # 已加载
error   # 加载失败

方法

// 添加或更新元素
lazyload.addOrUpdateElement(Element || ElementList || selector)

// 移除元素
lazyload.removeElement(Element || ElementList || selector)

// 移除所有元素
lazyload.clean()

// 更新图片状态，可视状态变化时调用
lazyload.updateState()

// 销毁
lazyload.destroy()