最轻量方案是插入图片时主动添加loading="lazy"属性，但需检查是否已存在；Safari旧版等场景需回退IntersectionObserver并绑定编辑器滚动容器；SSR与客户端需协同：SSR输出loading="lazy"，客户端hydrate后暂存src到data-src再清空。
直接在插入 <img> 时写 loading="lazy" 是最轻量的做法，但编辑器不自动透传、SSR 与客户端行为不同步、Safari 旧版失效——这些才是实际卡点。
可视化编辑器里怎么安全加 loading="lazy"
编辑器（比如基于 contenteditable 或低代码画布）默认不会给插入的图片加 loading 属性，也不能靠“全局 JS 扫描”补漏，因为可能重复触发或覆盖用户手动设置。
- 监听编辑器的图片插入事件（如
insertImage、onNodeInsert），拿到新<img>后检查：if (!img.hasAttribute('loading')) img.setAttribute('loading', 'lazy') - 避免多次插入/撤销重做导致重复设置：加
data-lazy-applied="1"标记，有该属性就跳过 - 如果编辑器支持自定义属性面板，把
loading作为可编辑字段暴露，让用户能手动切eager/lazy - 不要在服务端渲染（SSR）阶段批量加
loading="lazy"，Next.js 等框架已对首屏做优化，盲目加反而干扰 hydration
为什么 Safari 旧版或 WebView 里 loading="lazy" 不生效
不是浏览器“不支持”，而是它依赖滚动根（root）的正确识别。编辑器内嵌滚动容器（如 div.editor-canvas）会破坏默认的 window 根检测，导致图片永远不触发加载。
- 必须用
IntersectionObserver回退，并显式绑定root: editorRef.querySelector('.editor-canvas') -
rootMargin建议设为"50px"或"100px"，防止快速滚动时“闪白” - Observer 回调里先检查
img.hasAttribute('data-loaded')，再赋值src，避免重复加载 - 编辑器切换“预览/编辑”模式时，需销毁旧 Observer 并重建，否则监听的是错误上下文
SSR + 可视化编辑共存时怎么避免 src 冲突
SSR 输出的 HTML 已含完整 src，但编辑器初始化后常清空 DOM 重挂载，导致原生懒加载逻辑丢失；若客户端又用 data-src + JS 控制，就会出现双请求或 404。
立即学习“前端免费学习笔记（深入）”；
- SSR 阶段只输出基础属性：
src、alt、loading="lazy"，**不输出data-src** - 客户端 hydrate 后立即遍历所有
img[loading="lazy"]，把src暂存到data-src，再清空src（留空或设src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="） - 确保宽高是 HTML
width/height属性（不是 CSS），否则 Safari 15.4+ 会拒绝懒加载并引发 CLS - 禁用
document.write()和同步阻塞脚本，它们会打断懒加载初始化时机
真正难的不是加属性，而是判断哪张图该 lazy、哪张该 eager，以及在 SSR/hydrate/编辑器重绘三者之间守住 src 的生命周期——漏掉任意一环，就可能出现首屏白屏或重复请求。
