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免费学习笔记（深入）”；
- 给需要懒加载的图片设置一个占位属性，如 data-src，存放真实图片地址
- 创建 Intersection Observer 实例，监听这些图片元素
- 当元素进入视口时，将 data-src 赋值给 src，触发加载
- 停止观察已加载的元素，避免重复执行
示例代码：
// 获取所有待懒加载的图片
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 的执行频率，又提升了用户体验，是当前推荐的标准做法。不复杂但容易忽略细节，比如及时取消观察和合理设置触发时机。
