当前位置：首页 > news >正文

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

news 来源：原创 2025/5/1 21:02:47

懒加载（Lazy Loading）和无限滚动（Infinite Scroll）是两种常见的优化技术，而 IntersectionObserver API 是实现这些功能的强大工具。

什么是 IntersectionObserver？

基本用法

1. 创建 IntersectionObserver

2. 观察目标元素

3. 停止观察

4. 关闭观察器

实现懒加载

示例代码

解释

实现无限滚动

示例代码

解释

总结

什么是 IntersectionObserver？

IntersectionObserver 是浏览器提供的一个 API，用于异步观察目标元素与其祖先元素或视口（viewport）的交叉状态。简单来说，它可以监听一个元素是否进入了视口，或者与某个父元素发生了交叉。

与传统的滚动监听相比，IntersectionObserver 更加高效，因为它不会频繁触发回调函数，只有在交叉状态发生变化时才会执行

基本用法

1. 创建 IntersectionObserver

要使用 IntersectionObserver，首先需要创建一个观察器实例。构造函数接受两个参数：

回调函数：当目标元素的交叉状态发生变化时，会调用这个函数。
配置选项（可选）：用于设置观察器的行为。

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      console.log('元素进入视口:', entry.target);
    } else {
      // 元素离开视口
      console.log('元素离开视口:', entry.target);
    }
  });
}, {
  root: null, // 默认是视口
  rootMargin: '0px', // 视口的边距
  threshold: 0.5 // 交叉比例的阈值
});

2. 观察目标元素

创建观察器后，可以使用 observe 方法开始观察目标元素：

const target = document.querySelector('.target-element');
observer.observe(target);

3. 停止观察

如果不再需要观察某个元素，可以使用 unobserve 方法停止观察：

observer.unobserve(target);

4. 关闭观察器

如果需要关闭整个观察器，可以使用 disconnect 方法：

observer.disconnect();

实现懒加载

懒加载是一种延迟加载资源的策略，通常用于图片或视频等资源。通过 IntersectionObserver，我们可以轻松实现图片的懒加载。

示例代码

<img data-src="image1.jpg" class="lazy-image" alt="Image 1">
<img data-src="image2.jpg" class="lazy-image" alt="Image 2">
<img data-src="image3.jpg" class="lazy-image" alt="Image 3">

const lazyImages = document.querySelectorAll('.lazy-image');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 将 data-src 的值赋给 src
      img.classList.remove('lazy-image');
      observer.unobserve(img); // 停止观察已加载的图片
    }
  });
}, {
  rootMargin: '0px 0px 100px 0px' // 提前 100px 加载
});

lazyImages.forEach(img => {
  observer.observe(img);
});

解释

HTML 结构：图片的 src 属性被替换为 data-src，避免页面加载时立即请求图片。
JavaScript 逻辑：
- 当图片进入视口时，将 data-src 的值赋给 src，触发图片加载。
- 加载完成后，停止观察该图片。

实现无限滚动

无限滚动是一种在用户滚动到页面底部时自动加载更多内容的技术。通过 IntersectionObserver，我们可以监听一个“哨兵”元素，当它进入视口时加载更多数据。

示例代码

<div id="content">
  <!-- 初始内容 -->
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div id="sentinel"></div> <!-- 哨兵元素 -->

const sentinel = document.querySelector('#sentinel');
let page = 1;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreData(); // 加载更多数据
    }
  });
});

observer.observe(sentinel);

function loadMoreData() {
  // 模拟异步加载数据
  setTimeout(() => {
    for (let i = 0; i < 5; i++) {
      const item = document.createElement('div');
      item.classList.add('item');
      item.textContent = `Item ${page * 5 + i + 1}`;
      document.querySelector('#content').appendChild(item);
    }
    page++;
  }, 1000);
}

解释

HTML 结构：#content 是内容容器，#sentinel 是哨兵元素。
JavaScript 逻辑：
- 当哨兵元素进入视口时，调用 loadMoreData 函数加载更多数据。
- loadMoreData 函数模拟异步加载数据，并将新内容添加到 #content 中。