loading="lazy"仅对初始html中存在、不在首屏、有明确宽高且父容器无transform/overflow:hidden等干扰属性的生效；动态插入、内或缺少sizes/srcset配合时均会失效。
直接加 loading="lazy" 不等于懒加载生效——很多模板里写了却没效果，问题出在 HTML 结构、属性组合或浏览器解析机制上。
为什么 loading="lazy" 在模板里不触发
浏览器只对「初始 HTML 中已存在」且「不在首屏内」的 <img> 应用懒加载。如果模板通过 JS 动态插入图片（比如 Vue 的 v-for 渲染、React 的 map()）、或图片被包裹在 overflow: hidden / transform 容器中，Intersection Observer 就可能无法正确判断可视状态。
- Vue/React 模板中，
loading="lazy"必须写在最终生成的<img>标签上，不能只写在组件 props 里 -
position: absolute+top: -9999px类占位方式会绕过懒加载检测，浏览器认为它“不可见但已渲染”，不触发加载 - 父级有
contain: layout或will-change: transform时，Chrome 可能跳过 Intersection Observer 回调
srcset 和 sizes 怎么配才不白写
只写 srcset 不配 sizes，浏览器根本不知道当前图片容器多宽，只能按设备像素比瞎猜，大概率下错图——比如移动端拉取了 2000w 的大图。
-
sizes值必须反映图片**实际占位宽度**，不是视口宽度：例如侧边栏内一张图占 300px，就写sizes="300px"；响应式布局可写sizes="(max-width: 768px) 100vw, 33vw" -
srcset中的w描述符（如800w）必须和原图真实宽度一致，否则切换逻辑失效 - 不要在
<picture></picture>的<source></source>上写loading="lazy"——该属性只对<img>有效
模板里用 <picture></picture> 做格式降级时的坑
AVIF/WebP 虽小，但直接替换 src 会导致旧浏览器空白，而错误地把 src 写进 <source></source> 标签会让所有浏览器都忽略它。
-
<source></source>只能有srcset和type，src必须且只能出现在最底层的<img>标签里 - 兜底
<img>的src必须是 JPEG 或 PNG，不能是 WebP（IE/Safari 13.1- 不识别） - 如果模板支持 SSR（如 Next.js、Nuxt），确保服务端也输出完整
<picture></picture>结构，否则客户端 hydration 时可能丢掉srcset
首屏图 preload 与 lazy 的冲突怎么解
想让 banner 图快，又怕它挤占带宽影响其他资源，硬加 loading="lazy" 反而导致首屏空白——这是典型策略错配。
- 首屏关键图（banner、logo、核心产品图）必须删掉
loading="lazy"，并加<link rel="preload" as="image" href="hero.jpg"> - preload 的
href必须和<img>的src完全一致，否则浏览器当两个资源处理，重复下载 - 不要给
loading="lazy"的图也 preload——预加载 + 懒加载 = 浏览器先下一遍，再等滚动触发第二遍
真正卡住的往往不是“没加 lazy”，而是“加了但被结构挡住”“格式降级写错位置”“preload 和 lazy 同时塞给同一张图”。检查时盯住 Network 面板里图片请求的 Priority 和 Initiator，比看代码更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
