Intersection Observer API能高效实现图片懒加载，提升网页性能。它通过异步监听元素与视口的交叉状态触发回调，避免频繁scroll事件带来的性能问题。使用时将真实图片地址存于data-src，结合new IntersectionObserver监听元素进入视口，预加载后替换src并停止观察，配合rootMargin提前加载、threshold设置触发比例，并建议添加错误处理、防重复加载及组件卸载时disconnect优化体验。
图片懒加载能有效提升网页性能，减少初始加载时间。传统做法依赖 scroll 事件监听和 getBoundingClientRect 计算元素位置，但频繁触发会影响性能。现代方案推荐使用 Intersection Observer API，它由浏览器异步处理，更高效、更流畅。
Intersection Observer 是什么？
Intersection Observer 是 javaScript 提供的一个 API，用于监测某个元素是否进入视口（viewport）。当目标元素与根元素（通常是视口）的交叉比例达到设定阈值时，回调函数就会被触发。
相比 scroll 事件，它不会阻塞主线程，性能更好，特别适合实现懒加载、无限滚动等场景。
基本语法和参数说明
创建一个观察器实例：
立即学习“Java免费学习笔记（深入）”；
const observer = new IntersectionObserver(callback, options);
callback：当交叉状态变化时执行的函数，接收一个 entries 数组和 observer 实例。
options 可选配置项：
- root：指定根容器，默认为浏览器视口（NULL）
- rootMargin：根元素的外边距，可用于提前触发加载，如 ’50px 0′
- threshold：触发回调的交叉比例，可以是数字或数组，比如 0.1 表示 10% 可见时触发
实现图片懒加载的步骤
以下是具体实现方式：
将真实图片地址放在 data-src 属性中，src 使用占位图或透明 Gif：
<img class=”lazy” src=”placeholder.gif” alt=”图片1″>
const images = document.querySelectorAll(‘.lazy’); const imageObserver = new IntersectionObserver((entries, observer) => { entries.foreach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.dataset.src; // 创建临时图片对象预加载 const tempImg = new Image(); tempImg.onload = () => { img.src = src; img.classlist.add(‘loaded’); // 可添加类控制淡入等效果 }; tempImg.src = src; // 加载完成后停止观察 observer.unobserve(img); } }); }, { rootMargin: ’50px’, // 提前 50px 开始加载 threshold: 0.01 // 只要露出 1%，就触发加载 }); // 观察每一张懒加载图片 images.forEach(img => imageObserver.observe(img));
优化建议
实际项目中可加入以下改进：
- 错误处理：给 img 添加 onerror 事件，防止图片加载失败导致空白
- 防重复加载：检查 data-src 是否已赋值给 src，避免重复操作
- 支持响应式：若使用 srcset，可用 dataset 存储多个尺寸路径
- 销毁机制：页面切换或组件卸载时调用 observer.disconnect() 释放资源
基本上就这些。Intersection Observer 让懒加载变得简单又高效，兼容性也较好（现代浏览器均支持，IE 需要 polyfill）。不复杂但容易忽略细节，掌握后能显著提升用户体验。