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 })
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » IntersectionObserver是什么?IntersectionObserver的介绍

发表评论

提供最优质的资源集合

立即查看 了解详情