一行代码搞定图片懒加载！浏览器原生 `loading="lazy"` 全面指南

在网页性能优化中，**图片懒加载（Lazy Loading）**一直是提升首屏加载速度、减少不必要流量消耗的关键手段。
过去，我们常常需要依赖 JavaScript 库（如 lazysizes）或手动基于 Intersection Observer API 实现一套懒加载逻辑，这既增加了开发成本，也增加了浏览器的执行负担。

好消息是——现代浏览器已经为我们提供了原生懒加载支持，只需要 一行 HTML 属性，就能实现高效、可靠的图片懒加载。

什么是 `loading="lazy"`

loading 是 HTML5 为 <img> 和 <iframe> 标签新增的一个属性，用于告诉浏览器何时加载这个资源。它有三个可选值：

值	含义
`lazy`	延迟加载，直到元素接近视口时才加载
`eager`	提前加载，不管是否在视口内
`auto`	由浏览器自行决定（通常接近 `eager` 的行为）

最简用法

<!-- 传统方式：需要 JS 监听滚动事件 -->
<!-- <img data-src="image.jpg" class="lazyload" alt="懒加载图片"> -->

<!-- 现代方式：原生支持！ -->
<img src="image.jpg" loading="lazy" alt="懒加载图片">

✅ 优点：不再需要 data-src、特定 class，也不需要任何初始化脚本。只需一个属性，浏览器就会在图片即将进入视口时自动加载。

原生懒加载 vs JS 懒加载

对比点	原生 `loading="lazy"`	JS 懒加载（如 lazysizes）
实现难度	极低（1 行代码）	较高，需要 JS 逻辑
性能开销	零 JS 执行开销	JS 会占用部分 CPU
浏览器支持	较新浏览器支持	所有浏览器可用（含 Polyfill）
灵活性	基本够用	更可定制（动画、渐进加载等）

为什么要用原生懒加载？

提升首屏加载速度
避免一次性加载所有图片，减轻网络与渲染压力。
节省流量
只加载用户实际会看到的图片，对移动端尤为友好。
减少 JavaScript 依赖
不用额外引入懒加载库，减少 JS 体积与执行开销。
简单可读
一个属性即可实现，以 HTML 为中心的开发更直观。

使用注意事项

1. 首屏图片不要懒加载

首屏可见的图片（如 Logo、Banner）应立即加载，避免延迟显示。

<!-- 提前加载 -->
<img src="banner.jpg" loading="eager" alt="首屏Banner">

<!-- 或不写 loading 属性 -->
<img src="logo.png" alt="网站Logo">

2. 一定要指定宽高

避免布局抖动（Layout Shift），影响用户体验和 Core Web Vitals。

<img src="article-image.jpg" loading="lazy" width="800" height="450" alt="文章配图">

如果是响应式图片，配合 CSS：

img {
  max-width: 100%;
  height: auto;
}

3. 浏览器支持情况（2025）

浏览器	支持版本
Chrome	76+
Edge	79+
Firefox	75+
Safari	16+
Opera	64+
IE	❌ 不支持

兼容性检测 & 降级：

if ('loading' in HTMLImageElement.prototype) {
    console.log('支持原生懒加载');
} else {
    const script = document.createElement('script');
    script.src = 'lazysizes.min.js';
    document.body.appendChild(script);
}

4. 配合 `srcset` 与 `sizes` 做响应式懒加载

<img 
  src="image-800.jpg" 
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w" 
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy" 
  width="800" 
  height="450" 
  alt="响应式懒加载图片">