Intersection Observer API通过异步监听元素进入视口实现高效懒加载，相比scroll事件更优；核心概念包括target、root、threshold和callback；基本用法是将真实图片地址存于data-src，观察带有.lazy类的图片，当交叉比例达阈值（如0.01）且进入视口时，替换src并停止观察；建议设置rootMargin提前加载、加载后调用unobserve释放资源、配合LQIP提升体验，并注意IE不支持需降级处理；合理设置阈值避免错过触发，整体简洁高效，推荐优先使用。
懒加载图片是提升网页性能的常用手段，而Intersection Observer API提供了一种高效、流畅的方式来实现这一功能。相比传统的监听scroll事件，它不会频繁触发重绘或回流，对性能更友好。
什么是Intersection Observer API
Intersection Observer是浏览器提供的API，用于异步检测一个元素是否进入视口（即用户可见区域）。它不直接监听滚动，而是由浏览器在合适时机通知你目标元素与根元素的交叉状态。
核心概念包括：
- target：要观察的元素，比如待加载的图片
- root：作为参照的容器，默认为浏览器视口
- threshold：触发回调的交叉比例，如0.1表示进入视口10%时触发
- callback：当交叉状态变化时执行的函数
基本用法：实现图片懒加载
将图片的真实地址放在data-src属性中，初始使用占位图或透明图：
<img class="lazy" src="placeholder.png" alt="示例图">
JavaScript中创建观察器并绑定目标元素：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img); // 加载后停止观察
}
});
}, {
rootMargin: '50px', // 提前50px开始加载
threshold: 0.01
});
// 观察所有懒加载图片
document.querySelectorAll('.lazy').forEach(img => {
observer.observe(img);
});
优化建议与注意事项
实际应用中可以加入一些改进点：
- 设置rootMargin提前加载图片，避免用户看到空白
- 加载完成后调用unobserve()释放资源，防止重复处理
- 可配合低质量占位图（LQIP）提升用户体验
- 注意兼容性：IE不支持，需降级方案或使用polyfill
基本上就这些。Intersection Observer让懒加载变得简洁又高效，推荐在项目中优先使用这种方式替代手动计算位置。不复杂但容易忽略细节，比如阈值设为0可能错过触发，稍微设小一点更稳妥。
