picture-lazyloading

图片懒加载

一个轻量级不依赖任何第三方库的库

安装

yarn add picture-lazyloading

支持通过浏览器引用，下载 umd 文件，之后通过script标签引用，暴露的名称是lazyLoad

使用方法

<img data-src="..." />

import lazyLoad from "picture-lazyloading";
const v = new lazyLoad({
  el: "img"
});
v.observe();

上面就是一个简短的结构，如果data-src属性不适用你，可以在选项中dataSrc中修改

如果需要对 DOM 元素进行定制，observe接收一个callback函数，它会 dom 相关信息返回给你

import lazyLoad from "picture-lazyloading";
const v = new lazyLoad({
  el: "img"
});
v.observe(information => {
  console.log(information);
});

注意，使用图片懒加载的时候你需要给 img 图片一个固定的宽高，或者一个初始的占位图片，不然会造成瀑布式的加载，你可以简单参考一下实例 demo

在Vue中使用，可以查看test目录下的App.vue，这是一个简短的演示

文档

new lazyLoad(Opention:Object);

Opention	说明
el: string, Element, NodeList, Array<Element , Node>	目标元素，你可以简单给定一个字符串
root?: Element , null , undefined	根元素，注意所有的目标元素应该是根元素的子节点
threshold?: Array<number>	触发的值 0-1 之间的数组，默认为[0]，可以为[0,0.25,0.75]这样，1 是完全可见触发
rootMargin?: string	偏移类似于 margin，默认为0px 0px 0px 0px
dataSrc?: string	data-*的自定义属性，修改 src 属性需要用到，默认为src
eepeatedMonitoring?: boolean	重复监测属性，默认为 false，元素只会被触发一次

方法	说明	返回
observe(callback?:(Example:Object))	启动监听	void
disconnect	取消对所有元素的监听	void
unobserve(Element)	取消指定元素的监听	void

Example	说明
boundingClientRect:DOMRectReadOnly	返回目标元素的边界信息的 DOMRectReadOnly. 边界的计算方式与 Element.getBoundingClientRect() 相同.
front:string	目标元素 src 的值
now:string	dataSrc 的值
rootBounds:DOMRectReadOnly	根元素的 DOMRectReadOnly 信息，与boundingClientRect类似
target:Element	目标元素
tiem:number	触发时间
whole:boolean	是否全部完成

常见问题

• 兼容性如何 ?

  基于IntersectionObserver实现，浏览器原生支持度还不是很高支持率详解，不过可以使用polyfill，demo使用了polyfill支持到 IE9+