IntersectionObserver 回调未触发，主因是 root 配置错误（如父容器含 transform 导致 root 降级）或 threshold 设置过高；需确认 DOM 挂载后再 observe，并移除 loading="lazy" 避免与 JS 懒加载冲突。
IntersectionObserver 回调没触发？先确认 root 和 threshold
懒加载失效最常见原因是 IntersectionObserver 实例配置不当，而非 HTML 或 JS 逻辑错误。回调不执行，大概率是目标元素始终没被判定为“进入视口”。root 默认是浏览器视口，但如果父容器加了 overflow: hidden 或 transform，它可能变成该容器——此时需显式传入 document.documentElement 强制回退到全局视口。另外，threshold 默认是 [0]，意味着只要元素任意像素出现在视口就触发；若设成 [0.1] 却只露出 5% 高度，回调就不会进。调试时优先打印 entries 数组长度和每个 entry 的 isIntersecting 与 intersectionRatio 值。
- 用
console.log(entries)确认是否监听到目标元素（entries 为空说明 selector 错或 DOM 未挂载） - 检查父级是否有
transform、perspective或will-change，它们会创建新的 stacking context，导致root自动降级为该容器 - 临时把
threshold改成[0, 0.5, 1]，观察intersectionRatio变化，判断元素是否真的“擦边”而未达标
DOM 挂载后才初始化 Observer？时机错在哪儿
如果图片或模块是异步渲染（比如 React useEffect、Vue onMounted、或 fetch 后插入），但 IntersectionObserver 在 DOM 尚未存在时就已创建并调用 observe()，那会直接报错 Failed to execute 'observe' on 'IntersectionObserver': The target element is not a valid HTMLElement，或者静默失败。不是所有框架都保证 ref 元素“一定可用”，尤其带条件渲染或服务端渲染（SSR）场景下，客户端 hydrate 前 DOM 可能为空。
- 确保
observe()调用发生在元素真实存在于 DOM 之后，例如在requestAnimationFrame回调里再执行一次检查 - React 中避免在组件顶层直接
observer.observe(ref.current)，改用useEffect(() => { if (ref.current) observer.observe(ref.current) }, [ref.current]) - 原生 JS 场景下，可配合
MutationObserver监听目标容器子节点变化，或用document.querySelector+setTimeout重试（仅作兜底，非推荐）
图片 src 被替换但没触发加载？检查 loading 属性和 srcset
即使 IntersectionObserver 正确触发，图片仍显示空白，往往卡在资源加载环节。现代浏览器对 loading="lazy" 有独立实现，它和 JS 手动懒加载互不感知——若同时用了两者，可能造成冲突：JS 把 data-src 写进 src，但浏览器因 loading="lazy" 延迟发起请求；或反过来，浏览器提前加载了 src，JS 又覆盖了一次，浪费请求。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 手动懒加载时，务必移除
loading="lazy"，否则 Chrome 会忽略 JS 设置的src -
srcset和sizes需同步更新，不能只改src；否则高 DPR 设备可能仍加载占位图 - 替换
src后，监听img.onload和img.onerror，确认是否真发出了请求（可在 Network 面板过滤 img 类型，看请求 URL 是否正确）
移动端 Safari 不触发？兼容性边界得单独验
iOS 12.2+ 支持 IntersectionObserver，但早期版本（如 iOS 12.0–12.1）存在 bug：当页面有 position: fixed 头部或底部栏时，rootMargin 计算异常，导致元素永远无法满足阈值。此外，Safari 对 root 为 null（即默认视口）的处理更严格，某些嵌套滚动容器中容易误判。
- 对 iOS getBoundingClientRect()），不能依赖
IntersectionObserver - 设置
rootMargin时避免使用百分比（如"0% 0% -20% 0%"），改用固定像素（"0px 0px -80px 0px"），iOS Safari 对百分比解析不稳定 - 用
if ('IntersectionObserver' in window)做基础检测，但别止步于此——真机连上 Web Inspector，在滚动时看 callback 是否进断点
交叉观察器本身很轻量，但失效点分散在 DOM 生命周期、CSS 渲染层、浏览器策略和设备差异之间。最容易被忽略的是 root 的隐式变更和 iOS 对 rootMargin 的解析偏差，这两处不打日志根本看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
