IntersectionObserver懒加载优化技巧

本篇文章向大家介绍《Intersection Observer实现懒加载技巧》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

使用Intersection Observer API实现图片懒加载，通过监听元素进入视口触发图片加载，相比传统scroll事件更高效。首先为img标签设置data-src存储真实地址，src指向占位图；然后创建Observer实例，当目标元素可见时将其src替换为data-src，并移除lazy类且停止观察；最后可通过CSS添加淡入过渡效果提升体验。该方法避免频繁重排，性能更优，推荐结合loading="lazy"做兼容处理。

页面加载大量图片时，性能容易下降。懒加载是一种优化手段，让图片在进入视口时才开始加载，从而减少初始资源请求。使用 Intersection Observer API 实现懒加载，比传统监听 scroll 事件更高效、更流畅。

1. 原理：Intersection Observer 是什么？

Intersection Observer 是浏览器提供的 API，用于异步监听目标元素与视口的交叉状态。当目标元素即将或已经进入可视区域时，回调函数会被触发，适合用来实现懒加载。

相比手动计算 offsetTop 和 scrollTop，它性能更好，不会频繁触发重排或重绘。

2. HTML 结构：标记待加载图片

给 img 标签设置一个临时属性（如 data-src）存放真实图片地址，src 先指向占位图或为空。

<img class="lazy" data-src="/images/photo1.jpg" src="/images/placeholder.png" alt="图片1">
<img class="lazy" data-src="/images/photo2.jpg" src="/images/placeholder.png" alt="图片2">

3. JavaScript 实现懒加载逻辑

创建 Intersection Observer 实例，监听所有带有 .lazy 类的图片。

const lazyImages = document.querySelectorAll('img.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.dataset.src;

      if (src) {
        img.src = src;
        img.classList.remove('lazy');
      }

      // 加载完成后停止观察
      observer.unobserve(img);
    }
  });
});

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

4. 提高体验：添加加载过渡效果

可以在图片加载过程中添加淡入效果，提升视觉体验。

先在 CSS 中定义类：

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img.lazy {
  opacity: 0;
}

图片加载完成后，自然从透明变为可见，实现平滑显示。

基本上就这些。用 Intersection Observer 实现懒加载不复杂但容易忽略细节，比如及时取消观察避免重复操作。这种方式兼容现代主流浏览器，配合 loading="lazy"（原生懒加载）可做降级处理，是目前推荐的做法。

好了，本文到此结束，带大家了解了《IntersectionObserver懒加载优化技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！