loading="lazy"仅对非首屏且有明确宽高（或css宽高比）的有效；失效原因包括缺尺寸属性、父级用transform/visibility:hidden、在iframe内、浏览器不支持或用户禁用；原生方案轻量但控制粗，js库适合需自定义阈值、兼容老环境等场景。
loading="lazy" 是浏览器原生支持的图片延迟加载机制，不用 JS 就能实现滚动到视口才加载，对首屏性能提升明显。但它不是“加了就一定生效”，很多情况会静默失效。
哪些图片适合加 loading="lazy"
只对「不在首屏内、且有明确高度/宽高比」的 <img> 有效。常见适用场景：
- 文章正文里的配图（尤其是长文）
- 卡片列表中的头像或缩略图（非首屏区域）
- 模态框/折叠区域里默认隐藏的图片（需确保父容器不设
display: none，否则 Chrome 会跳过懒加载）
反例：<img> 在 <picture></picture> 内时，必须把 loading="lazy" 放在 <img> 标签上，而不是 <picture></picture>；<img> 没设 width/height 或 CSS 未声明尺寸时，部分浏览器（如 Safari）可能拒绝懒加载。
loading="lazy" 失效的典型原因
它依赖浏览器判断图片是否“可能进入视口”，以下情况会导致直接忽略该属性：
-
<img>缺少width和height属性（或 CSS 中未设置固定尺寸），导致无法预估占位空间 - 父级元素用了
transform、opacity: 0或visibility: hidden—— 这些不影响布局，但会干扰浏览器的可见性计算 - 图片在
iframe内，或页面启用了document.write()动态写入（已废弃但仍有遗留） - 用户禁用了懒加载（Chrome 设置中关闭 “Enable lazy image loading”）或使用旧版浏览器（Safari 15.4+、Firefox 75+、Edge 79+ 才稳定支持）
和 JS 懒加载库（如 lozad）怎么选
原生 loading="lazy" 足够轻量，但控制粒度粗：不能自定义阈值、不支持加载失败回调、不触发自定义事件。JS 库适合这些场景：
- 需要提前 200px 开始加载（原生默认约 1250px，不可配）
- 要给加载中状态加占位符或骨架屏
- 图片来自 CMS，尺寸未知，需靠 JS 测量真实宽高再触发
- 必须兼容 IE 或老 Android WebView
注意：两者不要混用。如果用了 lozad，务必移除 loading="lazy"，否则 Chrome 可能因重复干预出现加载卡顿或重复请求。
实际写法与兼容兜底建议
最简安全写法：
<img src="photo.jpg" style="max-width:90%" style="max-width:90%" loading="lazy" alt="描述文字">
若服务端渲染时尺寸不确定，可用 CSS 强制维持宽高比：
.img-placeholder {
aspect-ratio: 3 / 2;
width: 100%;
}
然后在 <img> 上加 loading="lazy" 并去掉 width/height 属性（现代浏览器认 aspect-ratio）。但要注意：CSS aspect-ratio 在 Safari 15.4+ 才支持，低版本需回退到内联 width/height。
真正容易被忽略的是：懒加载依赖浏览器的 Intersection Observer 实现，而某些安卓定制 ROM 或企业内网代理会拦截或降级该 API —— 此时图片可能永远不加载，必须配合 onerror 回调手动补救。
