图片懒加载

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

安装

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+