rootmargin设为负值虽可提前加载图片，但易误触发且存在移动端兼容性问题；应优先使用正值缓冲，动态修改需重建observer实例，并配合decoding="async"、fetchpriority="low"及intersectionratio>0判断加载。
rootMargin 设为负值时图片会提前加载，但容易误判可视区域
很多人以为 rootMargin 只是“多看几像素”，其实它直接影响 IntersectionObserver 的触发时机和精度。设为 "-100px" 意味着元素顶部距离视口底部还有 100px 时就视为“进入”，这在快速滚动时可能触发过早——图片还没到用户真正要看的位置，却已发起请求，浪费带宽和资源。
更关键的是：负 margin 在移动端存在兼容性陷阱，部分安卓 WebView 对负值解析不一致，可能导致 isIntersecting 始终为 false。实操建议如下：
- 优先用正值做缓冲，例如
"150px"（向下预留 150px），既保证提前加载，又避开滚动抖动导致的误触发 - 若必须用负值，务必配合
threshold: [0]，否则默认threshold: 0在负 margin 下可能无法触发回调 - 在 iOS Safari 中测试负值行为，某些版本对
rootMargin: "-50px"会忽略 top/bottom，只生效 left/right
IntersectionObserver 实例不能复用 rootMargin 动态变更
rootMargin 是 Observer 初始化时绑定的，后续修改 observer.rootMargin 属性完全无效。常见错误是想根据设备屏幕尺寸切换 margin 值，结果写了：
observer.rootMargin = "200px"; // ❌ 无作用
正确做法是销毁旧实例、重建新实例。尤其要注意 DOM 元素是否已被观察过——重复调用 observe() 不会报错，但也不会更新 margin。
- 封装一个
createObserver()工厂函数，接受rootMargin作为参数 - 监听
resize事件时，先调用unobserve()所有目标，再disconnect()，最后新建 observer - 避免在 React/Vue 组件卸载时忘记
disconnect()，否则 observer 持有 DOM 引用，造成内存泄漏
图片预加载必须配合 decoding="async" 和 fetchpriority="low"
仅靠 IntersectionObserver 触发 img.src 赋值，并不能保证“高性能”。浏览器仍会同步解码、阻塞主线程，尤其在低端设备上明显卡顿。真正的性能优化要落到 HTML 属性层面：
- 服务端渲染或 SSR 模板中，初始
<img>标签必须含decoding="async"，否则即使 JS 延迟赋值，浏览器也会尝试同步解码占位符 - 动态插入的
<img>元素，创建后立即设置img.decoding = "async"和img.fetchPriority = "low" -
fetchpriority="low"在 Chrome 101+ 生效，能降低图片请求的网络调度优先级，避免挤占关键资源（如 JS/CSS）带宽
注意：fetchpriority 不是所有浏览器支持，需降级处理——可结合 loading="lazy" 作为 fallback，但二者不要共存（loading="lazy" 会覆盖 IntersectionObserver 的控制权）。
滚动极快时 intersectionRatio 接近 0 仍需加载，别依赖 isIntersecting
当用户猛甩页面（比如手指快速滑动 iOS 页面），元素可能在单帧内“闪入又闪出”视口，导致 isIntersecting 为 false，但 intersectionRatio > 0（哪怕只有 0.001）。如果只判断 isIntersecting，这部分图片就永远不加载。
实操中应以 intersectionRatio > 0 为加载依据，而非 isIntersecting：
observer.observe(img);
// 回调中
if (entries[0].intersectionRatio > 0) {
img.src = img.dataset.src;
}
-
intersectionRatio是唯一可靠指标，它反映元素实际可见面积占比，不受滚动瞬时性干扰 - 避免在回调里重复加载：加个
data-loaded="true"标记，或直接移除 observer（unobserve(img)） - 慎用
threshold数组，多个阈值会频繁触发回调；简单场景用[0]即可，复杂交互动效才考虑[0, 0.25, 0.5, 0.75, 1]
真正难的不是让图片“出现时加载”，而是让它们在各种滚动节奏、设备性能、网络条件下都稳稳地“刚好来得及”。rootMargin 是杠杆，但支点在你对 intersectionRatio 的信任程度上。
