使用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 先指向占位图或为空。
立即学习“Java免费学习笔记（深入）”；
<img class="lazy" src="/images/placeholder.png" alt="图片1"> <img class="lazy" 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”（原生懒加载）可做降级处理，是目前推荐的做法。