juejin-lazyload
掘金 图片延迟加载插件。
机制
起始状态
初始化
加载中
[placeholder]
为透明占位 SVG 的 Data URL(data:image/svg+xml,...
),其宽高由 infoGetter
得到,不指定则无占位。使用透明占位 SVG 可以使 IMG 元素得到与加载成功状态相同的尺寸布局表现以防止页面跳动。
加载成功
加载失败
为防止失败时页面跳动,占位 SVG 保持不变。
建议
加载中及加载失败推荐根据状态类来自定义样式,比如使用 background-image
来显示表示正在加载的动图。
状态变化钩子 onStateChange
可以用来应对更自由的需求,比如使自定义结构下 IMG 元素图片渐显。
安装
npm i -S juejin-lazyload
使用
初始化
模块化环境
const lazyload = ...
浏览器直引
var lazyload = ...
构造参数
Element || ElementList || selector // 加载区域与可视区域之差 threshold: 0 // 状态更新的最小时间间隔 interval: 200 // 是否启用防抖,待可视状态变化停止时才更新图片状态 debounce: false // 是否自动监听 window 的 scroll 和 resize 事件 reactive: true // true - 图片头部加载完成后立即显示 | false - 全图加载完成后才显示 eagerShowing: false // 初始化及 addOrUpdateElement 时调用 url: String // 图片地址,用以设置 IMG 元素的 src 或其它元素的 background-image width: Number // 图片宽度,用以设置加载时透明占位 SVG 宽度 height: Number // 图片高度,用以设置加载时透明占位 SVG 高度 // 可视区域,默认为文档可视区域 DOMRect // 状态变化钩子,state = 'inited' || 'loading' || 'loaded' || 'error' {}
图片元素状态类
inited # 已初始化 loading # 正在加载 loaded # 已加载 error # 加载失败
方法
// 添加或更新元素lazyload // 移除元素lazyload // 移除所有元素lazyload // 更新图片状态,可视状态变化时调用lazyload // 销毁lazyload