IntersectionObserver 初始化后图片不触发加载，是因为必须显式调用observe()注册目标元素，不能仅靠构造函数；data-src切换src后图片空白或404，主因是路径解析错误；同源iframe内可获取contentDocument创建独立observer，跨源需内部注入逻辑；性能优化应合理设置threshold和rootMargin，并指定编辑器容器为root以确保位置计算准确。
IntersectionObserver 初始化时为什么图片不触发加载
常见现象是页面滚动后，img 元素始终没加载，控制台也无报错。根本原因是：Observer 实例创建后，**必须显式调用 observe() 注册每个目标元素**，不能只靠构造函数自动监听。
实操建议：
- 确保每张懒加载图片都执行了
observer.observe(imgElement)，尤其注意动态插入的图片需在插入 DOM 后立即 observe - 避免对已加载过的
img重复调用observe()，可加data-loaded="true"标记或用Set缓存已注册元素 - 若使用
document.querySelectorAll('img[data-src]')批量初始化，记得检查返回 NodeList 是否为空（比如图片还没渲染进 DOM）
data-src 切换到 src 后为什么图片仍显示空白或 404
典型错误是直接赋值 img.src = img.dataset.src，但未处理路径解析、协议缺失或相对路径上下文问题。浏览器对 src 的解析依赖当前文档 URL，而编辑器环境（如 iframe、沙箱页面、本地 file:// 协议）极易导致路径失效。
实操建议：
- 优先使用绝对路径或以
/开头的根相对路径；若必须用相对路径，用new URL(img.dataset.src, document.baseURI).href规范化 - 加载前清空
src防止缓存旧图：img.src = ''，再赋新值 - 务必监听
img.onload和img.onerror，出错时 fallback 到占位图或记录日志，避免静默失败
在富文本编辑器中如何安全监听 iframe 内的图片
如果 HTML 编辑器基于 iframe（如 TinyMCE、CKEditor），主页面的 IntersectionObserver 默认无法监听 iframe 内容，因为跨域限制或 DOM 隔离。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 仅当 iframe 同源时，才可通过
iframe.contentDocument获取其 document，再对其内部img[data-src]创建独立 observer - 不同源 iframe 必须由 iframe 内部脚本自行初始化 observer —— 即把懒加载逻辑注入到 iframe 的 HTML 中，而非主页面统一控制
- 避免在编辑器内容未 ready 时提前运行 observer，监听
iframe.onload或编辑器的contentReady事件后再初始化
性能敏感场景下 IntersectionObserver 的阈值与 rootMargin 怎么设
默认 threshold: 0 表示只要像素级进入视口就触发，但用户快速滚动时可能频繁加载、回退、再加载。更合理的是预加载可视区外一段距离，同时减少抖动触发。
实操建议：
- 普通列表页：设
threshold: 0.1（10% 进入即加载），rootMargin: '200px'提前 200px 加载 - 移动端小屏幕：
rootMargin: '100px 0px'更保守，避免误加载太多离屏图 - 避免
rootMargin过大（如'1000px'），否则首屏大量图片会一次性请求，压垮服务器或触发浏览器并发限制 - 若编辑器支持“预览模式”，可临时增大
rootMargin；编辑模式下则缩小，减少干扰
实际中最容易被忽略的是：**编辑器内图片可能被包裹在 figure、div[contenteditable] 或自定义组件中，导致 getBoundingClientRect() 计算位置失准，进而影响 intersectionRatio 判断**。这种情况下，observer 的 root 不能默认用 document，得指定为编辑器容器元素，并确保该容器设置了 overflow: visible 或有明确滚动上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
