【前端】IntersectionObserver 实现图片懒加载和无限滚动

使用 IntersectionObserver 实现图片懒加载和无限滚动

在现代Web开发中，图片懒加载和无限滚动是提升用户体验的两个重要技术。通过合理利用浏览器的 IntersectionObserver API，我们可以轻松实现这两种功能。下面将详细介绍如何使用 IntersectionObserver 来实现图片懒加载和无限滚动，同时给出相应的代码示例。

一、IntersectionObserver 简介

IntersectionObserver 是一种浏览器API，用于异步监测元素与其祖先元素或视口（viewport）之间的交叉状态。它非常适用于实现懒加载，能够在用户滚动到特定位置时加载图像或其他内容。

二、实现图片懒加载

懒加载的基本思路是只在图片进入视口时才加载它。这样可以减少初始加载的资源，提升页面加载速度。

1. HTML结构

首先，我们需要设置HTML结构，假设我们有多张图片要展示：

<div class="image-container">
    <img data-src="image1.jpg" alt="Image 1" class="lazy">
    <img data-src="image2.jpg" alt="Image 2" class="lazy">
    <img data-src="image3.jpg" alt="Image 3" class="lazy">
    <!-- 更多图片 -->
</div>

在这里，我们使用 data-src 属性来存储图片的真实路径，而 src 属性则留空或者使用占位图。

2. JavaScript 实现

接下来，我们使用 IntersectionObserver 来实现懒加载：

document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('img.lazy');

    const options = {
        root: null, // 相对于视口
        rootMargin: '0px',
        threshold: 0.1 // 交叉比例阈值
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src; // 加载真实图片
                img.classList.remove('lazy'); // 移除 lazy 类
                observer.unobserve(img); // 解绑观察
            }
        });
    }, options);

    images.forEach(image => {
        observer.observe(image); // 开始观察每张图片
    });
});

在这个代码中，我们首先选择所有带有 lazy 类的图片，并创建一个 IntersectionObserver 实例。在回调函数中，当图片进入视口时，将 data-src 的值赋给 src，然后解绑该图片的观察。

三、实现无限滚动

无限滚动的概念是加载更多内容，通常是在用户滚动到页面底部时。利用 IntersectionObserver，我们可以高效地监测用户的滚动位置。

1. HTML结构

<div id="content">
    <!-- 初始加载内容 -->
</div>
<div id="loading" style="display: none;">加载中...</div>

我们需要一个内容容器和一个加载提示元素。

2. JavaScript实现

let page = 1; // 当前页面
const loading = document.getElementById('loading');

const loadMoreContent = () => {
    loading.style.display = 'block';

    // 模拟异步加载数据
    setTimeout(() => {
        const content = document.getElementById('content');
        for (let i = 0; i < 10; i++) {
            const item = document.createElement('div');
            item.textContent = `这是第 ${++page} 页的内容`;
            content.appendChild(item);
        }
        loading.style.display = 'none';
    }, 1000);
};

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent(); // 加载更多内容
        }
    });
}, options);

observer.observe(loading); // 观察加载提示元素

在这个示例中，当用户滚动到“加载中...”元素时，loadMoreContent 函数将被调用，模拟从服务器获取数据，并将内容动态添加到页面中。

总结

通过使用 IntersectionObserver，我们可以轻松实现图片懒加载和无限滚动，这不仅能优化页面性能，还能改善用户体验。虽然这两种功能的实现细节不同，但核心思想都是利用浏览器的交叉监测能力，在用户需要时才加载资源。