如何通过IntersectionObserver实现懒加载
通常懒加载等都会通过监听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>
到此这篇关于通过IntersectionObserver实现懒加载的文章就介绍到这了,更多相关IntersectionObserver懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了uni-app实现微信小程序长按拍视频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
JS实现仿google、百度搜索框输入信息智能提示的实现方法
这篇文章主要介绍了JS实现仿google、百度搜索框输入信息智能提示的实现方法,实例分析了javascript实现智能提示功能的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS运算符简单用法,结合实例形式详细分析了JavaScript各种逻辑运算符、数学运算符、关系运算符等相关操作技巧,需要的朋友可以参考下2020-01-01
JS getRandomValues和Math.random方法深入解析
这篇文章主要为大家介绍了JS getRandomValues和Math.random方法深入详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04![TypeScript中的类型断言[as语法|＜＞语法]的使用](//img.jbzj.com/images/xgimg/bcimg4.png)
TypeScript中的类型断言[as语法|＜＞语法]的使用
本文主要介绍了TypeScript中的类型断言[as语法|＜＞语法]的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了JS实现淡入淡出图片效果的方法,结合实例形式分析了js鼠标响应实现图片淡入淡出效果的原理与相关实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JS根据生日算年龄的方法,涉及javascript操作时间的相关技巧,非常简单实用,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了javascript闭包功能与用法,结合具体实例形式深入浅出的分析了javascript中闭包的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了js实现鼠标移入图片放大效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
下面小编就为大家带来一篇去除html代码里面的script正则方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
![TypeScript中的类型断言[as语法|＜＞语法]的使用](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论