Intersection Observer
Intersection Observer
在日常开发中,经常会遇到对数据、图片进行懒加载的处理,要判断用户是否已经看到了数据或者图片。之前用的方法是通过听到scroll事件或者使用setInterval来判断,这种方法的缺点是,由于scroll事件触发频率高,计算量很大,如果不做防抖节流的话,很容易造成性能问题,而setInterval由于其有间歇期,也会出现体验问题。后来推出了一个新的api——IntersectionObserver。
Intersection Observer 翻译过来即交叉观察器,主要是用于监听目标元素与指定的元素视窗是否发生交叉,一句话总结:Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。Intersection Observer是浏览器提供的构造函数,接受两个参数,callback:可见性发现变化时的回调函数,option:配置对象(可选)。该函数的返回值是一个观察器实例,上面有4个方法:
observe:开始监听特定元素,接收一个target参数,值是Element类型,用来指定被监听的目标元素。如果需要观察多个节点,则需要多次调用。
unobserve:停止监听特定元素,接收一个target参数,值是Element类型,用来指定停止监听的目标元素
disconnect:关闭监听工作,不接收参数,用来关闭监听器
takeRecords:返回所有观察目标的对象数组,不接受参数,返回所有被观察的对象,返回值是一个数组
还有callback 参数,目标元素的可见性变化时,就会调用观察器的回调函数callback。
callback一般会触发两次。一次是目标元素刚刚进入视口,另一次是完全离开视口。
const io = new IntersectionObserver((changes, observer) => {})
callback函数的参数接收两个参数changes和observer:
changes:这是一个数组,每个成员都是一个被观察对象。举例来说,如果同时有两个被观察的对象的可见性发生变化,那么changes数组里面就会打印出两个元素,如果只观察一个元素,我们打印changes[0]就能获取到被观察对象
observer: 这是一个对象,返回我们在实例中传入的第二个参数option(如果没传,则返回默认值)
IntersectionObserver API 可以应用在预加载(滚动加载,翻页加载,无限加载)、懒加载(后加载、惰性加载)
还需要注意的是IntersectionObserver API是异步的,不随着目标元素的滚动同步触发。还有它优先级很低,只有等线程空下来才会执行它。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)