性能更佳、使用更简单的懒加载IntersectionObserverEntry（观察者）

原创已于 2023-07-04 14:16:47 修改 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

于 2022-07-28 10:29:50 首次发布

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用IntersectionObserver API监测节点可见性变化，通过实例演示如何创建观察者、添加目标节点，并解释了isIntersecting属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（以下都是个人在项目中使用的理解，有错欢迎指正）
IntersectionObserverEntry用于观察两个节点的交互程度

一、获取被观察节点

当被观察节点进入可视界面时触发

var target = document.getElementById('xxx')

二、创建观察者

var loadingObserver = new IntersectionObserver(ObserverList=>{
		// ObserverList是被观察节点的数组，其中每个元素isIntersecting代表进入还是退出
        if(ObserverList[0].isIntersecting){
        	console.log('正在加载...')
        }
    },{
    	// 两个目标重叠的程度
        threshold: 0.1,
        // root 为null或者不写时默认为浏览器可视界面
        root: null
    })

三、添加被观察目标

	// target 将被插入 上面的ObserverList 中
	loadingObserver.observe(target)

	// 可以添加多个
	loadingObserver.observe(target1)
	loadingObserver.observe(target2)