loading="lazy"未生效主因是浏览器不支持或违反硬性条件：需chrome 76+/edge 79+/firefox 75+/safari 15.4+，且src必须为真实url、不可动态插入、不可缺失sizes（配合srcset时）、父容器不能含transform等合成属性。
为什么 loading="lazy" 没生效？
多数情况下不是代码写错了，而是浏览器没触发懒加载逻辑——loading="lazy" 仅在支持该属性的现代浏览器中生效，且必须满足「图片进入视口前未被 JS 提前请求」这一前提。Chrome 76+、Edge 79+、Firefox 75+ 支持，Safari 15.4+ 才开始支持（iOS Safari 15.4+ 起），旧版 Safari 完全忽略该属性，连 fallback 都不触发。
img 标签加 loading="lazy" 的硬性条件
光写 <img src="a.jpg" loading="lazy"> 不够，必须同时满足：
- 图片不能在 HTML 中被 JS 动态插入（如
document.createElement('img')后再 append），否则浏览器无法在解析阶段识别懒加载意图 -
src属性必须是真实 URL，不能是空值、占位符（如src="#"）或 data URL（data:image/...）——后者会立即解码，绕过懒加载 - 不能同时存在
srcset但缺失sizes，否则部分 Chromium 版本会退化为 eager 加载 - 父容器不能有
transform、opacity或will-change等触发合成层的 CSS，这会干扰浏览器对滚动容器的判断，导致懒加载失效
如何验证 loading="lazy" 是否真正起作用
别只看 Network 面板有没有延迟请求，重点检查两个信号：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 打开 Chrome DevTools → Network → 勾选
Disable cache，刷新页面后滚动，观察图片请求是否在滚动到视口附近时才发出（时间戳明显滞后于页面加载完成时间） - 在 Elements 面板中右键图片节点 →
Break on > attribute modifications，然后滚动；如果懒加载生效，你会看到src属性被浏览器内部动态设置（触发 breakpoint），说明是原生懒加载在接管 - 若使用 Lighthouse 审计，「Offscreen images」建议项消失 ≠ 懒加载生效，它只检测是否有
loading="lazy"属性，不校验实际行为
兼容性兜底：当 loading="lazy" 不可用时怎么办
不是所有场景都能依赖原生 lazy，比如要支持 iOS 14 或微信内置浏览器（X5 内核长期不支持），就得手动实现。但注意：不要用 IntersectionObserver + src 切换这种“伪懒加载”去覆盖原生行为——它会和原生 lazy 冲突，导致图片加载两次。正确做法是：
- 先检测支持性：
'loading' in HTMLImageElement.prototype - 只对不支持的环境挂载
IntersectionObserver，且 observer 回调中仅设置img.src（不设srcset，除非你也同步处理响应式逻辑） - 避免监听
window滚动，用IntersectionObserver自带的阈值控制（如{ threshold: 0.1 }），防止高频回调拖慢渲染
复杂点在于，原生 loading="lazy" 会自动处理 srcset + sizes + DPR，而手写方案得自己算宽高比、设备像素比、容器宽度……多数项目其实只需要保障关键图片不阻塞首屏，真要全量兼容，不如直接上 decoding="async" 配合服务端响应式图片降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
