应用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()办法的返回值，如果没有根元素（即间接绝对于视口滚动），则返回nullboundingClientRect：指标元素的矩形区域的信息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