乐趣区

关于前端:IntersectionObserver-使用-列表懒加载虚拟列表实现

jiezi

应用 IntersectionObserver 能够让咱们疾速实现 懒加载 和 虚构列表

首先咱们创立 observer 观察者实例

observer = new IntersectionObserver(callback, options);

options 是配置的参数 (选填)

observer 则是一个观察器实例

  • 有一些根底的办法
// 开始察看
observer.observe(document.getElementById('example'));
​
// 进行察看
observer.unobserve(element);
​
// 敞开观察器
observer.disconnect();

callback 回调函数

  • 回调函数会在察看的元素 开始进入视窗 或者齐全来到视窗的时候触发

callback函数的参数（entries）是一个数组，每个成员都是一个 IntersectionObserverEntry 对象

IntersectionObserverEntry 对象

IntersectionObserverEntry用来提供指标元素的信息, 一共有 6 个属性

​
{
  time: 3893.92,
  rootBounds: ClientRect {
    bottom: 920,
    height: 1024,
    left: 0,
    right: 1024,
    top: 0,
    width: 920
  },
  boundingClientRect: ClientRect {// ...},
  intersectionRect: ClientRect {// ...},
  intersectionRatio: 0.54,
  target: element
}
​
time：可见性发生变化的工夫，是一个高精度工夫戳，单位为毫秒
target：被察看的指标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()办法的返回值，如果没有根元素（即间接绝对于视口滚动），则返回 null
boundingClientRect：指标元素的矩形区域的信息
intersectionRect：指标元素与视口（或根元素）的穿插区域的信息
intersectionRatio：指标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，齐全可见时为 1，齐全不可见时小于等于 0

Option 对象

IntersectionObserver构造函数的第二个参数是一个配置对象。它能够设置以下属性

threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为 [0]，即穿插比例（intersectionRatio）达到0 时触发回调函数

new IntersectionObserver(entries => {/* ... */}, 
  {threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);
// 当指标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数

root rootMargin 应用的频率较低

warning

IntersectionObserver API 是异步的，不随着指标元素的滚动同步触发。

规格写明，IntersectionObserver的实现，应该采纳requestIdleCallback()，即只有线程闲暇下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其余工作执行完，浏览器有了闲暇才会执行

live demo

codeSandBox

虚构列表

虚构列表通常的办法 是 监听滚动事件 而后更新列表项，这种办法适用性更广，但可能会存在监听滚动的性能问题

同时 IntersactionObserver 无需监听滚动 也能实现虚构列表的成果

并且实现了 滚动动画，并解决了疾速滚动白屏的问题

github/vue-virtual-list-observer

vue-virtual-list-observer – npm (npmjs.com)

参考:

阮一峰 IntersactionObserver

MDN

退出移动版