视口交叉观察器，一个可用于懒加载的最佳方案

bollat

已于 2024-10-08 23:28:36 修改

阅读量396

点赞数 9

分类专栏：前端开发文章标签： javascript vue.js node.js electron 性能优化

于 2024-10-08 23:26:13 首次发布

本文链接：https://blog.csdn.net/bollat/article/details/142771854

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

视口交叉观察器（Intersection Observer）是一个现代浏览器 API，用于异步观察元素与视口或其他元素的交叉状态。它可以用来检测一个元素何时进入或离开视口，从而实现懒加载、无限滚动、滚动动画等功能。

基本概念

Intersection Observer 提供了一种方式来异步观察目标元素与其祖先元素或视口之间的交叉情况。这种监视机制有以下几个优点：

性能优化：相较于监听滚动事件，Intersection Observer 在性能上更高效，尤其是在需要大量元素监视的情况下。
异步回调：通过回调函数来处理交叉状态，避免了频繁的重绘和重排。

如何使用 Intersection Observer

下面是一个基本的使用示例：

1. 创建一个 Intersection Observer 实例

// 创建一个 Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 当元素进入视口时执行的代码
            console.log('元素进入视口', entry.target);
            entry.target.classList.add('visible');
            // 如果只需要观察一次，可以调用 unobserve 方法停止观察
            observer.unobserve(entry.target);
        }
    });
}, {
    root: null, // 默认为视口
    rootMargin: '0px', // 可选，视口边缘的偏移量
    threshold: 0.1 // 可选，元素与视口交叉的阈值
});

2. 选择要观察的元素

// 选择要观察的元素
const targetElements = document.querySelectorAll('.observe');

targetElements.forEach(element => {
    observer.observe(element); // 开始观察每个元素
});

3. HTML 示例

假设你有以下 HTML 结构：

<div class="observe">元素 1</div>
<div class="observe">元素 2</div>
<div class="observe">元素 3</div>

4. CSS 示例

你可以通过 CSS 添加一个简单的效果，比如渐显：

.observe {
    opacity: 0;
    transition: opacity 0.5s;
}

.observe.visible {
    opacity: 1; /* 当元素可见时改变透明度 */
}

完整示例

以下是一个完整的示例，结合了上述所有代码：

<!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>
    <style>
        .observe {
            opacity: 0;
            transition: opacity 0.5s;
            margin: 100px 0; /* 添加一些空隙以便滚动 */
            height: 100px;
            background-color: lightblue;
        }

        .observe.visible {
            opacity: 1; /* 当元素可见时改变透明度 */
        }
    </style>
</head>
<body>

    <div class="observe">元素 1</div>
    <div class="observe">元素 2</div>
    <div class="observe">元素 3</div>

    <script>
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    console.log('元素进入视口', entry.target);
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target); // 如果只需观察一次，可以调用 unobserve 方法
                }
            });
        }, {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        });

        const targetElements = document.querySelectorAll('.observe');
        targetElements.forEach(element => {
            observer.observe(element);
        });
    </script>

</body>
</html>