使用 IntersectionObserver 实现懒加载提升网页性能的高效方案

小仓桑

已于 2025-04-26 18:41:24 修改

阅读量918

点赞数 7

CC 4.0 BY-SA版权

分类专栏： JavaScript问题集合文章标签： javascript 前端

于 2025-04-26 16:04:40 首次发布

本文链接：https://blog.csdn.net/qq_43462019/article/details/147538174

JavaScript问题集合专栏收录该内容

4 篇文章

订阅专栏

在当今快节奏的网络环境中，用户对于网页加载速度的要求越来越高。对于前端开发者而言，优化网页性能、减少初始加载时间成为了一项至关重要的任务。懒加载（Lazy Loading）作为一种有效的性能优化策略，能够延迟非关键资源的加载，直到用户需要它们时才进行加载。而IntersectionObserver API 的出现，为实现懒加载提供了更加简洁、高效的方式。本文将深入探讨如何使用IntersectionObserver实现 JavaScript 懒加载，以及它在网页性能优化中的重要作用。

一、懒加载的重要性

在网页中，往往包含大量的图片、视频、脚本等资源。如果这些资源在页面加载时全部一次性加载，不仅会增加页面的初始加载时间，还会消耗用户的网络流量，尤其是在移动设备上，这可能导致用户体验的严重下降。懒加载的核心思想就是只在资源即将进入用户视野时才进行加载，从而减少初始加载的资源量，提升页面的加载速度和响应性能。例如，对于一个长页面中的图片，我们可以让它们在即将显示在视口内时再加载，而不是在页面一开始就全部加载。

二、IntersectionObserver API 简介

IntersectionObserver是浏览器提供的一个原生 JavaScript API，它允许我们异步观察目标元素与祖先元素或视口的交集变化情况。它通过创建一个观察器实例，并指定观察的目标元素和配置选项，当目标元素与指定的根元素（可以是视口或其他祖先元素）发生交集变化时，观察器会自动调用预先设置好的回调函数。这种异步、低开销的方式，使得它非常适合用于实现懒加载等需要监听元素可见性变化的场景。

IntersectionObserver的基本使用步骤如下：

创建一个IntersectionObserver实例，传入回调函数和配置选项。

const observer = new IntersectionObserver(callback, options);

使用observe方法开始观察目标元素。

observer.observe(targetElement);

当目标元素与根元素的交集状态发生变化时，回调函数会被调用，在回调函数中可以根据需要执行相应的操作。

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

observer.unobserve(targetElement);

当不再使用观察器时，可以调用disconnect方法关闭观察器，释放资源。

observer.disconnect();

三、使用 IntersectionObserver 实现图片懒加载

图片是网页中最常见的需要懒加载的资源之一。下面通过一个具体的示例来展示如何使用IntersectionObserver实现图片的懒加载。

1. HTML 结构

首先，创建一个包含图片的 HTML 页面，这里我们使用data-src属性来存储图片的真实地址，而src属性则设置为一个占位图片（例如一个小的加载动画图片）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>IntersectionObserver Lazy Loading</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <img data-src="image1.jpg" alt="Lazy Load Image 1" class="lazy-image" src="placeholder.jpg">
  <img data-src="image2.jpg" alt="Lazy Load Image 2" class="lazy-image" src="placeholder.jpg">
  <img data-src="image3.jpg" alt="Lazy Load Image 3" class="lazy-image" src="placeholder.jpg">
  <script src="script.js"></script>
</body>

</html>

2. JavaScript 代码

在 JavaScript 文件（script.js）中，使用IntersectionObserver来实现图片的懒加载逻辑。

// 获取所有带有懒加载标识的图片元素
const lazyImages = document.querySelectorAll('.lazy-image');

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      // 停止观察已加载的图片
      observer.unobserve(img); 
    }
  });
}, {
  // 配置选项，这里设置根为视口，根的边距为 0
  root: null, 
  rootMargin: '0px', 
  // 阈值为 0.1 表示目标元素 10% 进入视口时触发回调
  threshold: 0.1 
});

// 开始观察每个懒加载图片
lazyImages.forEach(image => {
  observer.observe(image);
});

在上述代码中，我们首先获取所有需要进行懒加载的图片元素。然后创建一个IntersectionObserver实例，在回调函数中判断目标元素是否进入视口（通过entry.isIntersecting属性），如果进入视口，则将图片的真实地址从data-src属性赋值给src属性，从而实现图片的加载，并停止对该图片的观察。最后，对每个懒加载图片调用observe方法开始观察。

四、使用 IntersectionObserver 实现其他资源的懒加载

除了图片，IntersectionObserver还可以用于实现其他资源的懒加载，例如视频、脚本等。以视频为例，我们可以在视频即将进入视口时才开始加载视频资源，减少页面初始加载的负担。

1. HTML 结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>IntersectionObserver Lazy Loading Video</title>
</head>

<body>
  <video data-src="video.mp4" controls class="lazy-video">
    <source src="placeholder.mp4" type="video/mp4">
  </video>
  <script src="script.js"></script>
</body>

</html>

2. JavaScript 代码

// 获取所有带有懒加载标识的视频元素
const lazyVideos = document.querySelectorAll('.lazy-video');

// 创建 IntersectionObserver 实例
const videoObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;
      const source = video.querySelector('source');
      source.src = video.dataset.src;
      video.load();
      // 停止观察已加载的视频
      observer.unobserve(video); 
    }
  });
}, {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
});

// 开始观察每个懒加载视频
lazyVideos.forEach(video => {
  videoObserver.observe(video);
});

在这个视频懒加载的示例中，当视频元素进入视口时，我们将视频的真实地址从data-src属性赋值给<source>标签的src属性，并调用video.load()方法开始加载视频资源，然后停止对该视频的观察。

五、兼容性与注意事项

虽然IntersectionObserver在现代浏览器中得到了广泛支持，但在一些较旧的浏览器中可能不被支持。为了确保兼容性，可以使用一些 polyfill 库，如intersection-observer，它可以在不支持该 API 的浏览器中模拟其功能。

此外，在使用IntersectionObserver时，还需要注意以下几点：

性能优化：合理设置threshold阈值，避免频繁触发回调函数，影响性能。

内存管理：及时调用disconnect方法关闭不再使用的观察器，释放资源，防止内存泄漏。

复杂场景处理：在复杂的页面布局和动态内容变化的场景中，需要仔细考虑元素的显示和隐藏逻辑，确保IntersectionObserver的正确使用。

六、总结

IntersectionObserver API 为实现 JavaScript 懒加载提供了一种强大而高效的方式。通过它，我们可以轻松地控制资源的加载时机，减少页面的初始加载时间，提升用户体验。无论是图片、视频还是其他资源，都可以利用IntersectionObserver实现灵活的懒加载策略。在实际项目中，合理运用这一技术，并注意兼容性和性能优化等问题，能够让我们的网页应用更加高效、流畅。随着前端技术的不断发展，IntersectionObserver也将在更多的性能优化场景中发挥重要作用。