前端神器IntersectionObserver，监听页面可视区域变化

🕗 发布于 2024-07-23 21:34 前端算法

在现代Web开发中，对页面中的元素进行视觉感知变得日益重要，尤其是在处理动态加载内容、无限滚动、广告跟踪和资源懒加载等功能时。传统的实现方式往往依赖于监听滚动事件，然后计算元素的位置判断是否进入可视区域，这种方法不仅代码复杂，而且会影响页面性能。IntersectionObserver API为此问题提供了一个高效且简便的解决方案。

什么是 IntersectionObserver？

IntersectionObserver API允许你配置一个观察者来监视一个或多个元素与其祖先或顶级文档视口(viewport)的交叉状态。当被监视的元素进入或离开配置的视图区域时，会执行回调函数。这样，你就可以根据元素的可见性来执行相关操作，例如加载图片、播放视频、停止取数据等。

如何使用 IntersectionObserver？

示例代码：图片懒加载

假设我们有一个图像列表，希望当用户滚动到图片位置时才加载图片，以此来提高页面加载速度和性能。下面是如何使用IntersectionObserver来实现这一功能的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Images with IntersectionObserver</title>
    <style>
        img {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
            opacity: 0;
            transition: opacity 0.3s;
        }
    </style>
</head>
<body>
    <div id="gallery">
        <!-- 假设图像列表非常长 -->
        <img data-src="image1.jpg" alt="Lazy Image">
        <img data-src="image2.jpg" alt="Lazy Image">
        <img data-src="image3.jpg" alt="Lazy Image">
        <!-- 更多图片 -->
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let observer;
            let images = document.querySelectorAll('img[data-src]');

            const loadImages = (image) => {
                image.setAttribute('src', image.getAttribute('data-src'));
                image.onload = () => image.style.opacity = 1;
                observer.unobserve(image);
            };

            observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        loadImages(entry.target);
                    }
                });
            }, { 
            root: null,
            rootMargin: "50px 0px", 
            threshold: 0.01 
            });

            images.forEach(image => {
                observer.observe(image);
            });
        });
    </script>
</body>
</html>

我们设置了一个IntersectionObserver用来观察视图窗口，当图片元素进入视口时（加上50px的边界余量），会触发加载图片的函数。加载完毕后，会取消观察该元素，并逐渐显示图片。

灵活配置观察条件

IntersectionObserver API提供了灵活的配置选项，让开发者能够根据具体的应用需求来调整元素的可见性检测。其中root、rootMargin和threshold是常用的配置项，下面将详细解释这些选项，并通过实例来说明它们的应用。

1. `root`

root属性指定了用作视口的元素，用于检查目标元素的可见性。如果没有指定或指定为null，则默认使用浏览器的视口（即viewport）。

示例: 假设我们有一个滚动容器div，我们想要观察这个容器内的元素是否可见，而不是整个页面的视口。此时，我们可以将这个div设置为root。

<div id="scrollContainer" style="height: 500px; overflow: auto;">
    <div id="targetElement">Watch me</div>
</div>

<script>
const observer = new IntersectionObserver(callback, {
    root: document.getElementById('scrollContainer')
});
observer.observe(document.getElementById('targetElement'));
</script>

2. `rootMargin`

rootMargin属性是扩展或缩小root边界的边距，用来增加或减少IntersectionObserver的视口大小。这类似于CSS的margin属性，可以用像素(px)或百分比(%)来指定。

示例: 如果设置rootMargin: "50px 0px", 这意味着观察区域将在顶部和底部各扩展50px。这对于提前触发事件（如懒加载图片）非常有用，可以在用户滚动到图片上方50px之前就开始加载图片。

<div id="targetElement">Watch me</div>

<script>
const observer = new IntersectionObserver(callback, {
    root: null, // 使用默认视口
    rootMargin: "50px 0px"
});
observer.observe(document.getElementById('targetElement'));
</script>

3. `threshold`

threshold属性定义了目标元素与视口相交的比例（即交叉区域占目标元素的比例），在这个比例达到后触发回调。这个值可以是0到1之间的任何单个数字，或者一个数字数组。

示例: 如果设置threshold: 0.1, 那么只要目标元素有10%进入视口，回调函数就会被触发。这对于确保元素一进入视口就立即执行某些操作（如统计曝光）非常有用。

<div id="targetElement">Watch me</div>

<script>
const observer = new IntersectionObserver(callback, {
    root: null, // 使用默认视口
    rootMargin: "0px",
    threshold: 0.01
});
observer.observe(document.getElementById('targetElement'));
</script>

IntersectionObserver回调参数

let images = document.querySelectorAll('img[data-src]');

const loadImages = (image) => {};

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadImages(entry.target);
        }
    });
}, {});

images.forEach(image => {
    observer.observe(image);
});

在这段代码中，创建了一个新的IntersectionObserver实例，并为其设置了一个回调函数。当观察到的元素进入或离开交叉区域时，这个回调函数被触发。在回调内部，通过遍历entries数组，检查每个元素的isIntersecting属性。如果该属性为true，意味着元素已经进入视口，此时会调用loadImages函数加载图片。

1. entries

entries是一个IntersectionObserverEntry对象的数组，表示所有被IntersectionObserver对象观察的元素的集合。每个IntersectionObserverEntry对象都包含关于某个特定目标元素和其相对于视口（或指定的root元素）的交叉状态信息。

每个IntersectionObserverEntry对象提供以下属性：

target：被观察的目标元素（DOM节点）。
isIntersecting：布尔值，表明目标元素是否与视口相交。
intersectionRatio：一个0到1之间的数字，描述了目标元素的可见部分占其总大小的比例。
intersectionRect：表示目标元素与视口交叉部分的矩形区域。
boundingClientRect：目标元素的边界框（bounding box）矩形，即元素的布局位置。
rootBounds：与root元素的边界框相对应的矩形，如果没有指定root，则是视口的边界框。

这些信息非常有用，特别是当你需要根据元素是否可见或其可见部分的比例来执行操作时（例如懒加载图像）。

2. observer

observer参数是指向IntersectionObserver实例本身的引用。这允许你在回调函数中直接访问观察者实例，进行如取消观察、重新观察等操作。

通过这个引用，可以调用以下方法：

observe(target) ：添加新的目标元素供IntersectionObserver观察。
unobserve(target) ：停止观察一个目标元素。
disconnect() ：停止观察所有目标元素，彻底关闭观察器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intersection Observer Example</title>
</head>
<body>
    <img id="lazyImage" src="placeholder.jpg" data-src="actual-image.jpg" alt="Lazy Loaded Image" style="width: 100%; height: auto;">

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var img = document.getElementById('lazyImage');
            var observer = new IntersectionObserver(function(entries, observer) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        var img = entry.target;
                        img.src = img.getAttribute('data-src');
                        observer.unobserve(img); // Once loaded, stop observing
                    }
                });
            }, {
                rootMargin: '0px',
                threshold: 0.1
            });

            observer.observe(img);
        });
    </script>
</body>
</html>

IntersectionObserver 的优势

性能：使用IntersectionObserver可以避免在scroll事件中进行大量的DOM操作和计算，从而减少主线程的工作负载。
准确性：直接由浏览器处理元素是否可见的计算，提高了可见性检测的准确性。
易用性：API简单易用，大大简化了相关的编码工作。

总结

IntersectionObserver为开发者提供了一个强大的工具，用于优化页面性能并改善用户体验。通过适当的使用这个API，可以在保证功能实现的同时，降低对性能的影响。不论是懒加载图片、实现无限滚动还是其他相关的动态内容展示，IntersectionObserver都是一个不可或缺的工具。

原文地址：https://blog.csdn.net/qq_37834631/article/details/138840560

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：如何检查我的网站是否支持HTTPS
下一篇：【MySQL进阶之路 | 高级篇】第二范式和第三范式

excel如何快速选中某个数字或者某串数字
鼠标光标放在某个数字或者某串数字的末尾，进行双击鼠标左键即可（就会选中当前鼠标光标前相邻的所有数字）：
阅读更多2024-09-17
面试官问：请描述一次你成功解决问题的经历？
面试官为什么要这么问？面试官问你描述一次成功解决问题的经历，主要是为了评估你的几个关键方面：问题解决能力：了解你在面对挑战时的思维方式和应对策略。决策能力：考察你在压力下做出明智决定的能力。沟通技巧：
阅读更多2024-09-17
VLMEvalKit 评测实践:InternVL2 VS Qwen2VL
多模态技术的突破，正在改变我们理解和交互世界的方式。无论是强大的感知能力、复杂的推理分析，还是图文融合的创新应用，InternVL2 与 Qwen2-VL 展现了大模型的无限可能。
阅读更多2024-09-17
mybatis开启日志
步骤很详细，直接上教程……
阅读更多2024-09-17
MySQL——数据库的高级操作（一）数据备份与还原（1）数据的备份
MySQL——数据库的高级操作（一）数据备份与还原（1）数据的备份
阅读更多2024-09-17
Blender渲染太慢怎么办？blender云渲染已开启
此次，渲染101云渲染农场正式加入了对Blender的全面支持，涵盖Blender的所有版本，不论是较新的Blender 4.0还是早期版本，都可轻松对接渲染101平台服务。不论是小型独立项目还是大型
阅读更多2024-09-17
ubuntu安装mysql 8.0忘记root初始密码，如何重新修改密码
修改my.cnf文件，在文件新增 skip-grant-tables，在启动mysql时不启动grant-tables，授权表。5.注释掉skip-grant-tables后重启mysql。2、修改m
阅读更多2024-09-17
JVM面试真题总结（十一）
总的来说，Java内存模型主要解决了多线程环境下共享数据的一致性、可见性等问题，是Java并发编程的基础。这种模型的好处是，由于启动类加载器是最顶部的加载器，因此它加载的都是最可信任的类库（Java的
阅读更多2024-09-17
Ubuntu 软件仓库镜像使用帮助
选择镜像。
阅读更多2024-09-17
用于稀疏自适应深度细化的掩码空间传播网络 CVPR2024
图像引导的深度补全是一项通过利用稀疏深度测量和RGB图像来估计密集深度图的任务；它通过估算深度来填充未测量的区域。由于许多深度传感器（如LiDAR和飞行时间相机（ToF））只能提供稀疏的深度图，这项任
阅读更多2024-09-17