loading="lazy"常失效，因需同时满足初始HTML存在、非首屏、宽高可推断、父容器无transform/overflow等、未被框架过滤等前提；任一不满足即退化为eager且无报错。

loading="lazy"写了但图片全量加载，常见失效点

浏览器对 loading="lazy" 的支持不是“写了就懒”，而是有一套硬性校验逻辑。只要任一条件不满足，它就会静默退化为 loading="eager"——你根本看不到报错，Network 面板里图片照常第一时间发出请求。

• <img> 缺少 width 和 height 属性（哪怕 CSS 里写了 aspect-ratio，Safari 15.4+ 仍可能拒懒加载）
• 父容器用了 transform、overflow: hidden、contain: layout 或 will-change: transform，破坏 Intersection Observer 检测基础
• 图片是 JS 动态插入的（比如 Vue v-for、React map()、富文本解析后 innerHTML 注入），不属于初始 HTML
• 写在 <source> 上而非最内层 <img> ——该属性只对 <img> 有效
• 图片在 <table> 内部（<td> 或 <tr> 中），Chrome 基本不支持表格子元素懒加载

怎么验证 lazy 是否真起作用

不能只看 HTML 里有没有写 loading="lazy"，得观察真实行为。两个关键信号缺一不可：

• DevTools → Network → 勾选 Disable cache → 刷新页面 → 筛选 Img 请求：首屏外的图**不应出现在初始请求列表里**；滚动后才逐批出现才算生效
• Elements 面板中右键目标 <img> → Break on → attribute modifications：如果滚动时看到 src 被浏览器动态设置（而非你 JS 手动赋值），说明原生 lazy 在接管

框架项目里 loading="lazy" 消失或无效

Vue/React 默认会过滤非标准属性，导致编译后 loading 字段直接消失。尤其 SSR 场景下，服务端输出的 HTML 里根本没这个字符串。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• Vue 2：必须写成 v-bind:{"loading":"lazy"}，直接写 loading="lazy" 会被忽略
• Vue 3 / React：可直接写，但要检查 CMS 富文本编辑器是否过滤了该字段，以及 SSR 框架（如 Nuxt）是否在 hydration 阶段跳过预加载逻辑
• 动态渲染（如分页加载）：插入 DOM 后需手动设 img.loading = 'lazy'，否则浏览器不会扫描新增节点

首屏图加 lazy 是负优化，不是漏配

Banner、Logo、用户头像这类首屏关键图，加 loading="lazy" 不仅不会延迟，反而可能被 Safari（尤其 iOS 16.3 及更早）跳过加载，导致白屏。这不是 bug，是规范行为——浏览器对首屏内 <img> 直接忽略该属性。

立即学习“前端免费学习笔记（深入）”；

• 必须显式写 loading="eager"（不能依赖默认值）
• 必须配 <link rel="preload" as="image" href="xxx">，且 href 和 <img src> 完全一致（含查询参数）
• 禁止给 loading="lazy" 的图再 preload——触发重复请求，浪费带宽

真正生效的前提很窄：初始 HTML 存在、不在首屏、宽高可推断、父容器干净、没被框架过滤。多数“失效”其实不是 bug，而是没满足这些前提。