前端神器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进阶之路 | 高级篇】第二范式和第三范式

【学习日记】notebook添加JAVA支持
作者是个大学生这个专栏主要收集课时常用的软件以及女朋友上课用的软件的教程。需提前配置好java环境本篇仅对添加支持进行说明。新开了gitcode 用于上传安装包。解压进入解压后目录复制文件地
阅读更多2024-11-15
Docker与Podman全面比较
Docker和Podman作为两大容器引擎，各自拥有独特的特点和优势。本文将从溯源、特点、技术优势、应用实例和技术前景等方面对Docker和Podman进行全面比较。
阅读更多2024-11-15
算法学习blog：day2 继续记日记
4. 明日计划：至少五道题，并且要学会并实现今天的三道题，看这五道题的思路解法，下一天进行实现优化。除此之外pdf粗略看到了20页，明天继续看，后面才是重点。1.做了三道PAT 76，77，78，差一
阅读更多2024-11-15
基于Python的网上银行综合管理系统
【2025最新】基于python+django+vue+MySQL的网上银行综合管理系统，前后端分离。
阅读更多2024-11-15
自定义注解+拦截器+jwtFilter实现权限控制
GetterSUPER_ADMIN(1, "超级管理员"),SYSTEM_ADMIN(2, "系统管理员"),DOMESTIC_CONSUMER(3, &quo
阅读更多2024-11-15
前端面试题整理-vue指令开发
在 bind 钩子中，我为绑定的元素添加了一个点击事件监听器，当元素被点击时，执行复制操作。我当时在开发点击复制文本的功能，我有很多个元素都想有这个功能，但是我又不想每个元素都绑定一个 onClick
阅读更多2024-11-15
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
阅读更多2024-11-15
GESP4级考试语法知识（贪心算法（四））
GESP4级考试语法知识（贪心算法（四））
阅读更多2024-11-15
20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速
创建一个eth0配置文件，配置文件的路径为：/etc/network/interfaces.d/eth0,设置动态ip的配置文件。虽然飞凌的OK3588-C的核心板使用的是千兆网卡RTL8211
阅读更多2024-11-15
【EmbeddedGUI】脏矩阵设计说明
脏矩阵设计说明
阅读更多2024-11-15