通过IntersectionObserver实现懒加载

最新推荐文章于 2023-09-13 20:45:00 发布

凌晨 || AmsWait

最新推荐文章于 2023-09-13 20:45:00 发布

阅读量455

点赞数

文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/amswait/article/details/130107488

版权

通常懒加载等都会通过监听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>

凌晨 || AmsWait

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通过IntersectionObserver实现懒加载

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

扫一扫