intersectionobserver 回调不触发的五大原因：rootmargin 未设置、threshold 非数组、目标元素未挂载即 observe、data-src 缺失或命名错误、图片含 loading="lazy" 冲突。
IntersectionObserver 回调不触发，先查这五件事
不是代码写错了，而是浏览器压根没把它当“可观察对象”。最常漏掉的是：rootMargin 没设、threshold 写成数字而非数组、目标元素还没挂载就 observe()。
-
root未显式设为null：默认用顶层视口，但若父容器有overflow: hidden却没设为root，观测范围就偏了 -
threshold必须是数组，比如[0.1]；写成0.1（非数组）会静默失败，回调永不触发 - 元素 DOM 还没插入文档就调用
observer.observe(img)：Vue 中ref未挂载、React 中useEffect没执行完都属此类 -
data-src属性缺失或命名错误（如写成data-original），导致赋值时img.dataset.src是undefined - 图片本身带
loading="lazy"，和 JS 懒加载冲突——必须加loading="eager"或直接移除该属性
threshold 和 rootMargin 怎么配才不卡顿又不延迟
阈值太低（如 0.01）容易误触，太高（如 0.8）会导致用户已看到一半才开始加载；rootMargin 设太小（如 '0px'）会等元素真进视口才动，用户一滚就白屏。
- 常规图文流推荐：
threshold: 0.01（1% 可见即触发） +rootMargin: '200px 0px'（提前 200px 开始请求） - 卡片类 feed（高度固定）可设
threshold: [0, 0.5]，分别在刚出现和半进入时做不同处理（如先占位、再高清） - iOS Safari 旧版（iOS 13–14）滚动快时
isIntersecting频繁翻转，建议加简单防抖：if (entry.isIntersecting && !img.dataset.loaded) -
rootMargin支持负值，比如'-50px'表示等元素离视口底边还有 50px 才算“即将进入”，适合需要更激进预加载的场景
SVG 里 标签怎么用 IntersectionObserver 加载
SVG 本身不支持 loading="lazy"，且 <image href="..."></image> 的加载时机由 SVG 渲染引擎控制，不能靠 src 赋值。必须监听 SVG 容器，再动态注入 href 或 xlink:href。
- HTML 结构要保留
data-src在<image></image>上：<svg><image></image></svg> - 回调里优先用
img.setAttribute('href', src)；Safari 13.1 以下需降级：img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src) - 不要对
<image></image>本身调用observe()——它没有渲染尺寸，浏览器无法计算交集，应观察外层<div class="svg-lazy"> <li>加载后务必调用 <code>observer.unobserve(entry.target)，否则 SVG 容器持续触发，可能引发重复注入 - 不要在回调里用
document.querySelector重新找图——框架重渲染后节点已替换，引用丢失 - Vue 推荐用
template ref+onUpdated，React 用useRef+useEffect，确保每次拿到真实 DOM 节点 - 通用兜底法：监听
document上的DOMNodeInserted（不推荐）或改用MutationObserver监听新增的.lazy元素 - 更轻量的做法：把
observer.observe()封装成函数，在每次插入新图后显式调用，比如initLazyImage(newImg)
DOM 动态插入后懒加载失效怎么办
用 querySelectorAll 批量取图再 observe()，只对初始存在的元素有效。后续通过 Vue v-for、React map 或 innerHTML 插入的图片，引用已失效。
真正难的不是写几行 IntersectionObserver，而是判断“这个元素此刻是否真的被浏览器识别为可观测目标”——它取决于 DOM 状态、CSS 渲染树、滚动容器层级，三者错一个，isIntersecting 就永远是 false。
