怎么通过IntersectionObserver实现懒加载

发布时间：2023-04-17 14:51:47 作者：iii
来源：亿速云阅读：119

本篇内容主要讲解“怎么通过IntersectionObserver实现懒加载”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么通过IntersectionObserver实现懒加载”吧!

通常懒加载等都会通过监听scroll事件用getBoundingClientRect()来判断元素位置来决定是否可以开始加载。性能开销是比较大的，为了节省性能又需要各种操作去弥补，例如用节流来减少判断次数等。
IntersectionObserver API可以完全省去这些操作，只需要简单的读取即可。

示例

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('h2');
    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>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>
    <h2>不可见</h2>
    <h5>不可见</h5>

    <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('h2');
        observedList.forEach(element => {
            observer.observe(element)
        });
    </script>
</body>
</html>

到此，相信大家对“怎么通过IntersectionObserver实现懒加载”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

怎么通过IntersectionObserver实现懒加载

示例

options 配置项

Demo

相关阅读