IntersectionObserver介绍

原创 YiHzo 随笔 Javascrip 22阅读 21 天前 举报

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

IntersectionObserver 为什么需要它 ?

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

IntersectionObserver 怎么解决这个问题?

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

IntersectionObserverEntry 对象

new IntersectionObserver(callback, options)

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

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

options 主要有

实例方法

observe()

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

unobserve()

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

disconnect()

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

takeRecords()

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复