如何通过IntersectionObserver实现懒加载
作者：凌晨?||?AmsWait 时间：2024-04-16 08:44:41
通常懒加载等都会通过监听scroll事件用getBoundingClientRect()来判断元素位置来决定是否可以开始加载。性能开销是比较大的，为了节省性能又需要各种操作去弥补，例如用节流来减少判断次数等。
IntersectionObserver API可以完全省去这些操作，只需要简单的读取即可。
点击查看IntersectionObserver 文档
示例
new IntersectionObserver(callBack, options);
let options = {
root: null, // 相对的根元素，null为视口
threshold: 1.0 //重叠率 0.0-1.0（完全重叠即完全进入root元素） 重叠率达到要求后触发事件
},
callBack = (entries, observer) => { // entries 数组，包含所有的被观察者
entries.forEach(entry => {
// isIntersecting 即是否重叠
entry.target.innerText = entry.isIntersecting ? '加载~~~~': '不可见';
})
},
observer = new IntersectionObserver(callBack, options);
let observedList = document.querySelectorAll('h1');
observedList.forEach(element => {
observer.observe(element)
});
options 配置项
传递到 IntersectionObserver() 构造函数的 options 对象，允许您控制观察者的回调函数的被调用时的环境。它有以下字段：
root
指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。
rootMargin
根(root)元素的外边距。类似于 CSS 中的 margin 属性，比如 “10px 20px 30px 40px” (top, right, bottom, left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为0。
threshold
可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过50％的时候，你可以指定该属性值为0.5。如果你想要 target 元素在 root 元素的可见程度每多25％就执行一次回调，那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。默认值是0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为1.0含义是当 target 完全出现在 root 元素中时候 回调才会被执行。
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 24px;
}
</style>
</head>
<body>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<h1>不可见</h1>
<h4>不可见</h4>
<script>
let options = {
root: null, // 根元素，null为视口
threshold: 1.0 //重叠率 0.0-1.0 重叠率达到要求后触发事件
},
callBack = (entries, observer) => {
entries.forEach(entry => {
entry.target.innerText = entry.isIntersecting ? '测试': '不可见';
})
},
observer = new IntersectionObserver(callBack, options);
let observedList = document.querySelectorAll('h1');
observedList.forEach(element => {
observer.observe(element)
});
</script>
</body>
</html>
来源：https://blog.csdn.net/amswait/article/details/130107488
0
投稿猜你喜欢
golang 实现interface{}转其他类型操作
Python制作动态词频条形图的全过程
mysqldump备份还原和mysqldump导入导出语句大全详解
python爬虫爬取某站上海租房图片
MySQL数据库表中的约束详解
python实现三子棋游戏
浅谈关于axios和session的一些事
mysql多个left join连接查询用法分析
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
基于JS判断iframe是否加载成功的方法(多种浏览器）
关于Pandas count()与values_count()的用法及区别
影响SEO的页面制作细节
对变量赋值的理解--Pyton中让两个值互换的实现方法
利用Django提供的ModelForm增删改数据的方法
Python通过zookeeper实现分布式服务代码解析
Python实现绘制双柱状图并显示数值功能示例
论坛首页效果图设计
SQL server使用自定义函数以及游标
windows系统下让mysql支持federated的storage engine
python实现自动化之文件合并
