loading="lazy" 常静默失效，主因是图片非初始html、父容器含overflow:hidden/transform、未配sizes、或js动态插入；需确保初始渲染、可视性可检测、srcset与sizes成对且准确。
直接写 loading="lazy" 不等于图片就真懒加载了——八成失效是因为没配 sizes、父容器加了 overflow: hidden，或图片是 JS 动态插入的。
为什么 loading="lazy" 经常静默失效
浏览器只对初始 HTML 中已存在、且解析时不在首屏视口内的 <img> 应用懒加载。以下情况会让它完全不触发：
- 图片由 Vue 的
v-for、React 的map()渲染 —— DOM 是后续挂载的，不属于“初始 HTML” - 父级元素有
overflow: hidden、transform、contain: layout，会干扰 Intersection Observer 判断可视性 - 用了
position: absolute; top: -9999px占位 —— 浏览器认为它“已渲染但不可见”，不走懒加载逻辑 -
<source></source>标签上写了loading="lazy"—— 该属性只对<img>有效，<source></source>忽略 - 只写
srcset不配sizes—— 浏览器根本不知道这张图在页面里实际占多宽，只能按100vw瞎猜，手机用户可能下了一张 2000w 的桌面图
srcset 和 sizes 必须成对出现才生效
srcset 告诉浏览器“我有哪些图”，sizes 告诉它“这张图在你屏幕上实际占多宽”。缺一不可：
-
sizes值必须反映真实占位宽度：侧边栏内一张图固定 300px，就写sizes="300px" - 响应式场景推荐写法：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset中的w描述符（如800w）必须和原图真实像素宽度一致，否则格式切换会错乱 - 别把
sizes写成"100vw"就完事 —— 它会让侧边栏、弹窗里的图也拉满全屏宽度，浪费流量
首屏关键图必须禁用 loading="lazy" 并预加载
banner、logo、首屏产品图这类内容，加了 loading="lazy" 不是优化，是自废武功：
- 它们会被延迟甚至跳过，导致 LCP（最大内容绘制）指标暴跌
- 正确做法是删掉
loading="lazy"，并加<link rel="preload" as="image" href="hero.jpg"> - 同时确保
width和height属性或 CSSaspect-ratio已设置，防止加载前布局抖动 - 如果服务端支持 HTTP/2 Server Push，可进一步提前推送这些资源
现代格式（WebP/AVIF）必须用 <picture></picture> + <source></source> 兜底
直接换 src 后缀为 .webp 是无效 fallback，浏览器不识别格式降级逻辑：
- 必须用
<picture></picture>包裹，<source type="image/webp"></source>写在前面，最后放一个<img src="photo.jpg">作为兜底 -
src只能出现在<img>里，<source></source>上写src或srcset都无效 - AVIF 虽小但编码慢、兼容性差（iOS 16.4+、Chrome 109+），建议只对静态运营图启用；WebP 几乎全平台支持，压缩率比 JPEG 高 25%~35%，是当前最稳妥的升级项
- 别用 JS 动态判断格式再插入
<img>—— 破坏预加载器（preload scanner），首屏图会晚 1~2 个渲染周期
真正卡顿的根源往往藏在「写了但没生效」的属性里：比如 loading="lazy" 被父容器 overflow: hidden 截断，或者 sizes 写成了媒体查询但漏了单位。优化不是堆属性，而是让每个属性都落在浏览器可执行的路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
