图片延迟加载技巧：loading=lazy使用教程

`loading="lazy"` 是浏览器原生支持的轻量级图片延迟加载方案，能显著提升首屏性能，但并非“一加即灵”——它仅对非首屏、具备明确尺寸（内联宽高或CSS宽高比）的图片生效，且在父元素使用transform/visibility:hidden、图片位于iframe内、浏览器不支持（如旧版Safari）或用户禁用时会静默失效；相比JS懒加载库，它零依赖、开箱即用，但缺乏自定义阈值、加载状态反馈和兼容兜底能力，适合现代环境下的常规场景；若需精细控制、兼容老旧系统或处理动态尺寸，则应选用lozad等库，并注意二者不可混用，同时务必通过`onerror`等机制防范Intersection Observer被拦截导致的加载失败风险。

loading="lazy" 是浏览器原生支持的图片延迟加载机制，不用 JS 就能实现滚动到视口才加载，对首屏性能提升明显。但它不是“加了就一定生效”，很多情况会静默失效。

哪些图片适合加 loading="lazy"

只对「不在首屏内、且有明确高度/宽高比」的 有效。常见适用场景：

• 文章正文里的配图（尤其是长文）
• 卡片列表中的头像或缩略图（非首屏区域）
• 模态框/折叠区域里默认隐藏的图片（需确保父容器不设 display: none，否则 Chrome 会跳过懒加载）

反例： 在 内时，必须把 loading="lazy" 放在 标签上，而不是 ； 没设 width/height 或 CSS 未声明尺寸时，部分浏览器（如 Safari）可能拒绝懒加载。

loading="lazy" 失效的典型原因

它依赖浏览器判断图片是否“可能进入视口”，以下情况会导致直接忽略该属性：

• 缺少 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" 
  width="300" 
  height="200" 
  loading="lazy" 
  alt="描述文字">

若服务端渲染时尺寸不确定，可用 CSS 强制维持宽高比：

.img-placeholder {
  aspect-ratio: 3 / 2;
  width: 100%;
}

然后在 上加 loading="lazy" 并去掉 width/height 属性（现代浏览器认 aspect-ratio）。但要注意：CSS aspect-ratio 在 Safari 15.4+ 才支持，低版本需回退到内联 width/height。

真正容易被忽略的是：懒加载依赖浏览器的 Intersection Observer 实现，而某些安卓定制 ROM 或企业内网代理会拦截或降级该 API —— 此时图片可能永远不加载，必须配合 onerror 回调手动补救。

理论要掌握，实操不能落！以上关于《图片延迟加载技巧：loading=lazy使用教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！