Intersection Observer

懒加载以前用定时器（或者滚动事件）对每个需要监听的元素使用 getBoundingClientRect() 获取元素位置。效率不高

var io = new IntersectionObserver(

entries => {

// [...IntersectionObserverEntry对象]

// 与目标对象交叉和分开各执行一次

// 一个包含相交矩形和元素矩形和root矩形属性的对象console.log(entries);},{/* Using default options. Details below */

// 默认选项是刚进入视口

// root = null;

// rootMargin = "0px"; // 来扩展或缩小rootBounds这个矩形的大小

// threshold = [0]; // 触发回调的一系列阈值});// Start observing an element

// 可以使用一个io多次调用observe观察多个元素

io.observe(element); // Stop observing an element// io.unobserve(element);// Disable entire IntersectionObserver // io.disconnect();

不能超出视口：Map intersectionRect to the coordinate space of the viewport of the Document containing the target.

IntersectionObserver 回调函数接收数组，每个对象对应一个跨越的阈值

IntersectionObserverEntry 对象提供目标元素的信息，一共有六个属性：

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于 0