IntersectionObserver是什么？IntersectionObserver的介绍

本篇文章给大家带来的内容是关于IntersectionObserver是什么？IntersectionObserver的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

允许你追踪目标元素与其祖先元素或视窗的交叉状态。此外，尽管只有一部分元素出现在视窗中，哪怕只有一像素，也可以选择触发回调函数。

IntersectionObserver 为什么需要它 ？

在我们需要监听目标元素是否进入视口时，需要监听scroll事件，大量的计算会造成性能问题

IntersectionObserver 怎么解决这个问题？

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。 即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

IntersectionObserverEntry 对象

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

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

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

options 主要有

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

实例方法

observe()

观察某个目标元素，一个观察者实例可以观察任意多个目标元素。注意，这里可能有同学会问：能不能 delegate？能不能只调用一次 observe 方法就能观察一个页面里的所有 img 元素，甚至那些未产生的？答案是不能，这不是事件，没有冒泡。

unobserve()

取消对某个目标元素的观察，延迟加载通常都是一次性的，observe 的回调里应该直接调用 unobserve() 那个元素.

disconnect()

取消观察所有已观察的目标元素

takeRecords()

理解这个方法需要讲点底层的东西：在浏览器内部，当一个观察者实例在某一时刻观察到了若干个相交动作时，它不会立即执行回调，它会调用 window.requestIdleCallback() （目前只有 Chrome 支持）来异步的执行我们指定的回调函数，而且还规定了最大的延迟时间是 100 毫秒，相当于浏览器会执行：

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

以上就是IntersectionObserver是什么？IntersectionObserver的介绍的详细内容，更多请关注Gxl网其它相关文章！