loading="lazy"加了没效果最常见原因是浏览器未触发懒加载逻辑，需同时满足src有真实值、能计算高度（靠width/height或aspect-ratio）、初始不在视口内、未被transform或visibility:hidden干扰可见性判断。
loading="lazy" 为什么加了没效果
最常见的情况不是属性写错了，而是浏览器压根没触发懒加载逻辑。它只在四个条件同时满足时才生效：src 有真实值、能算出高度（靠 width 和 height 属性或 CSS aspect-ratio）、初始不在视口内、没被 transform 或 visibility: hidden 干扰可见性判断。
容易踩的坑：
- 用
style="width: 100%"但没设height或aspect-ratio→ 浏览器无法预估尺寸，直接跳过懒加载 - 图片包在
display: none容器里 → 视口计算失效，loading="lazy"形同虚设 - 用了
<picture></picture>却把loading="lazy"写在<source></source>上 → 必须写在最外层的<img>标签上 - 服务端模板或 CMS 富文本过滤了未知属性 → 检查最终 HTML 源码里是否还存在
loading
loading="eager" 和不写 loading 有什么区别
没有区别。不写 loading 就等价于 loading="eager"，都是立即发起请求。但显式写出来有两点实际价值：
- 语义明确：告诉后续维护者“这张图必须首屏加载”，避免被误删或覆盖
- 规避某些 SSR 框架的默认行为：比如 Next.js 在某些配置下可能对未声明
loading的图片做自动优化，显式声明可绕过干扰
首屏关键图（banner、logo、商品主图）建议统一写成 loading="eager"，别依赖“默认行为”。
loading="lazy" 能和 srcset/sizes 一起用吗
能，而且必须一起用——否则移动端可能拉取桌面尺寸大图。浏览器在懒加载触发那一刻，会结合当前视口宽度和 sizes 表达式，从 srcset 中选最匹配的资源。
但要注意写法：
-
srcset、sizes、loading="lazy"必须写在同一行<img>标签里，不能拆开 - 如果
srcset里某一项路径无效，浏览器 fallback 到src，但不会报错；若src也为空，图片就彻底不显示 - CDN 或 HTML 压缩工具可能 strip 掉
loading属性，上线前务必用 curl 或浏览器“查看页面源代码”确认它还在
什么时候该放弃 loading="lazy" 改用 IntersectionObserver
当需要精确控制加载时机、容错或视觉反馈时，原生 loading 就不够用了。典型场景：
- 局部滚动容器（如弹窗内的列表、卡片折叠区）→
loading只监听window滚动，完全无效 - 瀑布流布局中图片高度不固定 → 浏览器无法准确判断进入视口时机，容易延迟或漏加载
- 需要加载失败 fallback（比如换占位图、重试）、加载中状态（骨架屏）、渐入动画 →
loading="lazy"不提供任何回调 - 想提前 500px 就加载（而非浏览器默认的约 1250px）→ 只能靠
rootMargin: "500px"控制
真正难处理的从来不是“怎么加 lazy”，而是“哪些图不该 lazy”以及“lazy 失效后怎么兜底”。兼容性、尺寸约束、服务端输出、CDN 过滤——这些环节漏掉一个，loading="lazy" 就只是个摆设。
