使用Intersection Observer实现懒加载_javascript性能优化

Intersection Observer API 可高效实现图片懒加载，避免频繁监听 scroll 事件。通过创建观察器实例，监听带有 data-src 属性的图片元素，当元素进入视口时，将 data-src 赋值给 src 并停止观察，从而提升性能。建议设置 rootMargin 提前加载、使用 loading="lazy" 降级、固定占位图尺寸以优化体验。

懒加载是提升网页性能的常用手段，尤其在页面包含大量图片或其他媒体资源时。传统实现方式依赖监听 scroll 事件并计算元素位置，但频繁触发会带来性能开销。使用 Intersection Observer API 可以更高效地实现懒加载，它由浏览器统一管理，避免了手动计算与性能损耗。

Intersection Observer 是什么？

Intersection Observer 是浏览器提供的 API，用于异步监测一个元素与其祖先元素或视口的交叉状态。当目标元素进入或离开可视区域时，Observer 会收到回调通知，无需开发者手动监听 scroll 或 resize 事件。

相比传统的 getBoundingClientRect + scroll 监听，Intersection Observer 的最大优势在于：

• 不阻塞主线程，由浏览器优化调度
• 语法简洁，易于维护
• 自动处理复杂的滚动容器和嵌套情况

实现图片懒加载的基本步骤

以下是一个典型的图片懒加载实现流程，使用 Intersection Observer 替代 scroll 监听。

立即学习“Java免费学习笔记（深入）”；

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

1. 给需要懒加载的图片设置一个占位属性，如 data-src，存放真实图片地址
2. 创建 Intersection Observer 实例，监听这些图片元素
3. 当元素进入视口时，将 data-src 赋值给 src，触发加载
4. 停止观察已加载的元素，避免重复执行

示例代码：

// 获取所有待懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');

// 创建观察器
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 加载真实图片
      img.removeAttribute('data-src'); // 防止重复加载
      observer.unobserve(img); // 停止观察
    }
  });
});

// 开始观察每张图片
lazyImages.forEach(img => {
  imageObserver.observe(img);
});

优化建议与注意事项

为了进一步提升体验和健壮性，可以加入以下优化点：

• 添加 loading="lazy" 作为降级方案，现代浏览器原生支持
• 为占位图设置固定尺寸，防止页面跳动
• 可设置 rootMargin 扩展触发范围，提前加载即将可见的内容
• 对错误图片显示默认占位图，提升容错能力

例如扩展触发区域（提前 100px 开始加载）：

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '100px 0' // 提前加载
});

基本上就这些。用 Intersection Observer 实现懒加载，既减少了 JavaScript 的执行频率，又提升了用户体验，是当前推荐的标准做法。不复杂但容易忽略细节，比如及时取消观察和合理设置触发时机。

以上就是使用Intersection Observer实现懒加载_javascript性能优化的详细内容，更多请关注php中文网其它相关文章！