富文本图片懒加载核心是输出时注入而非事后扫描，需在服务端渲染、编辑器插入或客户端组件化阶段主动添加loading="lazy"，并兼顾兼容性fallback。
富文本内容里的图片自动加懒加载，核心不是“事后扫描”，而是“输出时注入”——得在服务端或编辑器渲染阶段就写入 loading="lazy"，而不是等 HTML 渲染完再用 JS 补。
服务端渲染（SSR）场景：输出 HTML 前统一处理
如果你用的是 Markdown 转 HTML、CMS 富文本字段、或模板引擎（如 Nunjucks、EJS），可在生成最终 HTML 字符串时，正则匹配或 DOM 解析所有 <img> 标签，只给非首屏、无 loading 属性的图片加上 loading="lazy"：
- 匹配规则示例（正则）：
<img>])*?src="([^"]+)"，再插入loading="lazy" - 更稳妥的做法是用 HTML 解析器（如 Node.js 的
jsdom或cheerio）遍历img元素，检查是否已含loading，未设且非首屏图（可通过data-priority或 class 判断）才添加 - 注意保留原有
width/height—— 若缺失，建议 fallback 补上默认尺寸（如width="640" height="480"），避免 Safari 忽略 lazy
前端可视化编辑器：插入时实时打标
像 TinyMCE、Quill、或者低代码画布类编辑器，在用户点击“插入图片”后，必须在创建 <img> 节点的那一刻就设置属性，不能依赖后续 JS 扫描：
- 监听编辑器的图片插入事件（如
editor.on('insertImage')或onNodeInsert） - 拿到新
img元素后，仅当它没有loading属性时，才设为lazy；若用户手动写了loading="eager"，就跳过 - 为防重复触发（如撤销/重做），可加自定义标记：
img.setAttribute('data-lazy-applied', '1') - 如果编辑器支持“预览模式”，确保该属性也同步到预览 DOM 中，而非仅编辑态
客户端动态渲染（React/Vue）：组件封装 + 属性透传
富文本常通过 v-html 或 dangerouslySetInnerHTML 渲染，这类方式不执行 JS，无法自动加属性。正确做法是：不用裸 HTML 输出，改用组件解析并重建 img：
- 把富文本 HTML 字符串交给专用解析器（如
DOMParser），提取所有img标签 - 对每个
img创建 React/Vue 组件实例，显式传入loading="lazy"、width/height（从src的 meta 或 fallback 推断） - 若原始 HTML 已含
data-src，说明是手动懒加载格式，直接沿用 IntersectionObserver 逻辑，不再加loading="lazy"防冲突
兼容性兜底：fallback 不靠扫描，靠结构约定
别指望用 document.querySelectorAll('img:not([loading])') 在页面加载后统一补 —— 这样可能触发多次 layout、漏掉动态插入的图、且在 Safari 旧版里仍无效：
- 真正可靠的 fallback 是：服务端输出时，对不支持
loading的 UA（如 User-Agent 含WebKit/605且版本 data-src + 占位图 +IntersectionObserver初始化逻辑 - 前端初始化时，只观察带
data-src的图片，不依赖loading属性是否存在 - 这样无论 SSR 还是 CSR，逻辑一致，不会因“补属性时机晚”导致首屏图也被懒掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
