36. 原生懒加载 loading=“lazy”

一个长页面可能有几十张图片。用户打开页面时，只看到首屏那几张。但浏览器会把所有图片都下载下来——浪费流量，拖慢加载速度。

原生懒加载就是解决这个问题的。

基本用法

给 <img> 加上 loading="lazy"：

<img src="photo.jpg" alt="风景照" loading="lazy" />

就这么简单。浏览器会自动判断：图片在视口附近时才加载，不在视口里就等着。

工作原理

浏览器会：

1. 解析 HTML 时，只下载首屏可见的图片
2. 用户滚动页面时，检测哪些图片即将进入视口
3. 提前一点开始加载这些图片（不是等到完全可见才加载）

“提前一点”的距离由浏览器决定，通常几百像素。保证用户滚到那里时图片已经加载好了。

适用场景

• 长文章中的配图
• 电商商品列表
• 图片画廊
• 评论区用户头像

不适合的场景

• 首屏大图（Hero Image）：用户第一眼就看到，不应该懒加载
• Logo：页面顶部，必须立即显示
• 关键内容图：用户需要立刻看到的图

<!-- 首屏大图：不懒加载 -->
<img src="hero.jpg" alt="首页大图" />

<!-- 下方内容图：懒加载 -->
<img src="content-1.jpg" alt="内容图1" loading="lazy" />
<img src="content-2.jpg" alt="内容图2" loading="lazy" />

和 width/height 一起用

懒加载的图片如果没写尺寸，加载时会导致布局跳动（CLS）。务必写上 width 和 height：

<img
  src="photo.jpg"
  alt="风景"
  width="800"
  height="600"
  loading="lazy" />

浏览器会预留 800x600 的空间，图片加载后不会挤动周围内容。

iframe 也支持

<iframe> 同样支持 loading="lazy"：

<iframe
  src="https://www.youtube.com/embed/xxxx"
  loading="lazy"
  title="视频"></iframe>

嵌入第三方视频、地图时特别有用——这些 iframe 通常很重，延迟加载能显著提升首屏速度。

decoding 属性

decoding 控制图片的解码方式：

<img src="photo.jpg" alt="照片" decoding="async" />

• async：异步解码，不阻塞页面渲染
• sync：同步解码（默认），图片大时可能卡顿
• auto：浏览器自己决定

浏览器兼容性

loading="lazy" 在现代浏览器中支持良好：

• Chrome 77+
• Firefox 75+
• Safari 15.4+
• Edge 79+

不支持的浏览器会忽略这个属性，图片正常加载——不会出问题，只是没有懒加载优化。

完整示例

一个典型的文章页面：

<article>
  <!-- 首屏头图：立即加载 -->
  <img src="cover.jpg" alt="文章封面" width="1200" height="600" />

  <h1>文章标题</h1>
  <p>正文内容...</p>

  <!-- 内容配图：懒加载 -->
  <img src="img-1.jpg" alt="配图1" width="800" height="400" loading="lazy" />
  <p>正文内容...</p>

  <img src="img-2.jpg" alt="配图2" width="800" height="400" loading="lazy" />
  <p>正文内容...</p>

  <img src="img-3.jpg" alt="配图3" width="800" height="400" loading="lazy" />
</article>

性能对比

方式	首屏加载图片数	首屏加载时间
不加 lazy	全部	慢
加 lazy	仅首屏	快

一个 50 张图片的页面，加 loading="lazy" 后首屏可能只加载 2-3 张，加载时间能减少一半以上。

下一节学习 <figure> 和 <figcaption>——给图片加说明文字。