IntersectionObserver 学习

一、IntersectionObserver 是什么

IntersectionObserver 是浏览器提供的一个 API，用于异步观察目标元素与其祖先元素或顶级文档视窗的交叉状态。 用于页面图片类懒加载，或者列表滚动加载等。

官网的解释：IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。祖先元素与视窗 (viewport) 被称为根 (root)。

通俗的说，就是我们可以使用 IntersectionObserver 接口来观察一个元素，观察它是否进入了可视区，这个可视区可以是相对于视窗或者是祖先元素。

【注意】 Intersection Observer API 无法提供重叠的像素个数或者具体哪个像素重叠，他的更常见的使用方式是——当两个元素相交比例在 N% 左右时，触发回调，以执行某些逻辑。

因为它是一个构造函数，所以我们使用 new 的方式实例化一个 IntersectionObserver 对象。 它接受两个参数：

（1）callback:回调函数，当元素的可见性发生变化的时候触发或者第一次监听目标元素的时候触发；

（2）options:一些配置项参数，可以用来配置根元素、什么时候触发回调等等（该参数可选）。

callback 接收一个数组（entries），每个成员都是一个 IntersectionObserverEntry 对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries 数组就会有两个成员。

【注意】 callback 回调函数是在主线程中运行的，如果有一些耗时的操作需要执行，建议使用 Window.requestIdleCallback() 方法---在浏览器空闲时期被调用。

const observer = new IntersectionObserver(callback, options);
observe(el){
 let io = new IntersectionObserver(entries=>{
        let realSrc = el.dataset.src;
        if(entries[0].isIntersecting) {
            if(realSrc) {
                el.src = realSrc;
                el.removeAttribute('data-src')
            }
        }
    })
    io.observe(el)
}, 

作者：蜗牛大哥
链接：juejin.cn/post/728000…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。