IntersectionObserver 的触发时机取决于 threshold 和 rootMargin，rootMargin 应设绝对单位预留缓冲（如 "200px"），threshold 推荐用数组 [0, 0.25, 0.5, 1] 提升鲁棒性，需配合 data-src、unobserve、decode 等确保懒加载链路完整。
IntersectionObserver 的触发时机不是“图片刚进视口”，而是“交集比例达到 threshold 且进入 rootMargin 区域”——这个差值决定了用户是否看到空白。
rootMargin 怎么设才不卡顿
设成 "0px" 是最常见错误：图片边缘贴着视口顶部才触发，用户已经滑到跟前了，加载还来不及解码。实际应预留提前量，让网络请求、DNS 解析、TCP 握手、图片解码都有缓冲时间。
-
rootMargin: "200px"适合普通图文页，给中速滚动留出约 300ms 缓冲 -
rootMargin: "0px 0px 400px 0px"（只扩大底部）适合瀑布流或无限滚动，避免上滑时误触发 - 在 iOS Safari 或安卓 WebView 中，若页面有
position: fixed导航栏，需减去其高度，例如"-64px 0px 200px 0px" - 不要写成百分比（如
"10%"），rootMargin只接受 px / em / rem 等绝对单位，浏览器会直接忽略非法值
threshold 为什么不能只用 0.1
threshold 控制“可见多少才算触发”，设单值 0.1 意味着必须有 10% 高度露出才能加载；但对窄高图（比如头像）、横屏设备或快速滚动场景，可能根本达不到该比例就滑过去了。
- 传数组更鲁棒：
threshold: [0, 0.25, 0.5, 1]，这样元素刚接触视口（0）、四分之一可见、一半可见、完全可见时都会触发回调，你可以在entry.intersectionRatio中取值判断优先级 - 首屏关键图建议监听
0：哪怕只有 1px 交集也立即加载，避免白屏 - 非首屏或低优先级图可设
[0.5]，减少无效请求 - 注意：Chrome DevTools 的 “Rendering > Paint flashing” 可直观验证 threshold 是否生效——触发时对应区域会闪黄框
observer.observe() 后为什么没反应
最常被忽略的是 HTML 结构和资源加载逻辑的耦合问题：Observer 只管“是否可见”，不管“有没有真实地址”或“是否已加载过”。
- 确保
<img>的src是占位图（如data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==），真实地址存在data-src里；否则浏览器一解析就发请求，Observer 失效 - 回调里必须调用
observer.unobserve(entry.target)，否则同一张图滚动进出多次会反复加载（特别是threshold设为数组时） - 如果图片是动态插入（如 Vue
v-for渲染后），得等 DOM 挂载完成再调用observe()，否则querySelectorAll(".lazy")找不到节点 - SSR 渲染的页面要注意：服务端没有
IntersectionObserver，首次 hydrate 前别执行observe()，否则报ReferenceError: IntersectionObserver is not defined
如何验证触发时机是否合理
靠肉眼滚动测试不可靠，容易误判“看起来慢”是网络问题还是 Observer 延迟。真正在意触发时机，就得看两个时间点：Observer 回调执行时刻，和 img.decode() 完成时刻。
- 在回调里打时间戳：
console.log('observed', Date.now(), entry.target.dataset.src)，再配合 Network 面板看 request start 时间，差值超过 200ms 就说明rootMargin不够 - 加载后立刻调
img.decode()并 catch 错误，WebP/AVIF 图片解码耗时远高于 JPEG，不处理会导致“已触发但画面仍空白” - 移动端真机调试时，打开 Chrome DevTools → Rendering → 勾选 “FPS meter” 和 “Paint flashing”，滚动中观察 FPS 是否骤降——如果降了，说明你忘了在回调里加
unobserve()，Observer 持续监听大量元素导致性能拖累
真正难的不是写几行 new IntersectionObserver，而是把 rootMargin、threshold、DOM 插入时机、图片格式解码、错误兜底这五件事串成一条不掉链子的流水线。任意一环松动，懒加载就会变成“懒加载失败”。
