Intersection Observer V2 引入 delay 和更精准的可见性判断，通过设置 threshold 0.2 和 delay 100ms，确保元素稳定可见且停留足够久才触发加载，结合 isIntersecting 和时间阈值实现交互安全的懒加载，避免快速滚动误触发，提升性能与用户体验。
Intersection Observer V2 在 V1 的基础上引入了 isIntersecting 和更精确的可见性判断机制，尤其新增了对元素是否“真正可交互”的支持，这使得我们可以实现更安全、更智能的懒加载策略。简单来说，V2 能判断元素不仅出现在视口中，而且用户很可能是有意与之交互——比如元素停留足够久、面积足够大，避免误触发。
理解 Intersection Observer V2 的关键增强
V2 版本（目前在现代浏览器中逐步支持）在原有 API 基础上增加了以下能力：
- 报告元素是否“实际正在被用户注意”：通过 isIntersecting 结合时间阈值和可见面积变化趋势，可以判断用户是否真的在看某个区域。
- 支持 time threshold：除了可见比例（threshold），还可以设置元素需连续可见多长时间才触发回调，防止快速滚动时误加载。
- 更精确的交叉状态变化检测：能区分短暂划过和稳定可见，提升懒加载的准确性。
实现交互安全的图片懒加载
目标是：只有当图片在视口中停留超过 100ms 且可见面积大于 20% 时，才加载真实内容。
示例代码：
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
// V2 支持 entry 的 isIntersecting 更稳定，并结合时间
if (entry.isIntersecting && entry.intersectionRect.width > 0) {
const target = entry.target;
const imgSrc = target.dataset.src;
if (imgSrc) {
const img = new Image();
img.src = imgSrc;
img.onload = () => {
target.src = imgSrc;
target.classList.add('loaded');
};
// 停止监听，只加载一次
observer.unobserve(target);
}
}
});
},
{
threshold: 0.2, // 至少 20% 可见
delay: 100, // V2 支持 delay，表示稳定交叉 100ms 后触发
}
);
document.querySelectorAll('img.lazy').forEach((img) => {
observer.observe(img);
});
}
注意：delay 是 V2 的关键选项，它确保元素不是一闪而过。只有持续满足条件才会触发回调，极大降低无效加载。
优化用户体验：添加占位与渐变入场
懒加载过程中，保持布局稳定和视觉平滑很重要。
- 使用低质量占位图（LQIP）或纯色背景维持尺寸。
- 加载完成后添加淡入动画：
img.lazy {
opacity: 0.7;
transition: opacity 0.3s;
}
img.loaded {
opacity: 1;
}
这样用户不会感到内容“突然跳动”，体验更自然。
降级处理与兼容性考虑
目前并非所有浏览器都支持 V2 的 delay 和精确行为，因此需要合理降级：
- 检查 'IntersectionObserverEntry' in window &&& 'isIntersecting' in IntersectionObserverEntry.prototype 判断基本支持。
- 对于不支持 delay 的环境，可用节流 + 时间戳模拟“稳定可见”逻辑。
- 关键资源仍可预加载，懒加载用于非首屏内容。
基本上就这些。用好 Intersection Observer V2 的时间感知能力，能让懒加载从“可见即加载”进化到“可交互才加载”，减少资源浪费，提升性能与用户体验。
