IntersectionObserver（相交观察器） API简介及在线实例

有时候我们希望跟踪DOM中的元素何时进入屏幕视线可见区域，这样就可以延迟加载图像或其他数据（比如广告）。

要实现这样的目的，一般的思路是我们可以通过挂接滚动事件或使用定时器并对该元素调用getboundingclientrect()，然后计算元素包围盒是否落在当前位置的窗口区域中来完成。然而，这种方法非常缓慢，因为每次调用getboundingclientrect()，都会强制浏览器重新布局整个页面。而且这个方法在iframe中不适用。单一来源模型和浏览器不允许您从包含iframe的网页访问任何数据。这是广告常见的问题，例如，经常使用iframes加载广告。为了解决这个问题，Web标准引入了IntersectionObserver API。

IntersectionObserver的设计目的是提高可视性测试的效率，该API让您知道观察到的元素何时进入或退出浏览器的视区。

如何创建

该API很容易使用，代码示例如下：

var io = new IntersectionObserver(
  entries => {
    console.log(entries);
  },
  {
    /* Using default options. Details below */
  }
);
// Start observing an element
io.observe(element);

// Stop observing an element
// io.unobserve(element);

// Disable entire IntersectionObserver
// io.disconnect();

使用默认选项来创建IntersectionObserver，在元素部分进入视图以及完全离开视区时，都将调用回调（如上以entries为输入参数的箭头函数）。

如果需要观察多个元素，可以使用同一个Intersectionobserver实例多次调用observer()方法。

传递给回调的entries参数是一个IntersectionObserverEntry对象数组。每个这样的对象都包含您所观察到的元素之一的当前位置交叉点数据：

rootBounds是对根元素（默认为视区）调用getboundingclientrect()的结果。boundingclientrect是对观察到的元素调用getBoundingClientRect()的结果。intersectionRect是这两个矩形的交集，告诉你观察元素的哪个部分可见。而IntersectionRatio告诉您元素中有多少是可见的。

如上所述，默认情况下，相交观察器只在被观察对象刚开始进入以及完全离开当前视界的时候才触发回调，那么有没有办法设置元素进入视界的百分比呢？答案是可以的，这通过设置threshold阈值选项来实现。它允许您定义一个相交比率阈值数组。每次IntersectionRatio与其中一个值相交时，都将触发回调。阈值的默认值是[0]，这刚好是默认行为。如果我们将阈值更改为[0，0.25，0.5，0.75，1]，我们将在每次元素的额外四分之一变得可见时收到通知。

最后给出一个在线实例，可以自己试试看：

https://wow.techbrood.com/fiddle/48490