【文件属性】:
文件名称:react-lazily-img:React Wrapper组件使用IntersectionObserver API延迟加载图像
文件大小:7KB
文件格式:ZIP
更新时间:2021-05-11 22:45:02
react component lazy viewport intersection-observer
懒惰地ReactIMG
React Lazily IMG是一个React Wrapper组件,用于延迟加载图像。 目标是使用方便且已知的标准HTML标记,并只是延迟加载它们。
特征
图片标签和IMG srcset支持
Webp检测
占位符
HTML && CSS图像支持
下载图像时的第一个渲染
自定义可见性百分比
渲染图像时的自定义回调
安装
npm install react-lazily-img --save
演示版
即将推出。
它是如何工作的 ?
React Lazily IMG由高性能的Intersection Observer API提供支持。 不需要烦人的滚动事件侦听器和elem.getBoundingClientRect()来检查元素是否在视口中。
MDN:
Intersection Observer API提供了一种异步观察目标元素与祖先元素或*文档的视口相交的
【文件预览】:
react-lazily-img-master
----package.json(817B)
----LICENSE(1KB)
----src()
--------index.js(50B)
--------webpSupport.js(375B)
--------error.js(791B)
--------IntersectionObserver.js(5KB)
----.gitignore(73B)
----README.md(5KB)