如何通过IntersectionObserver实现懒加载

2023-05-16 11:37

短信预约 -IT技能 免费直播动态提醒

通常懒加载等都会通过监听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懒加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

IntersectionObserver懒加载

阅读原文内容投诉