一、核心定义

loading="lazy" 是HTML5原生懒加载属性，用于<img>和<iframe>，滚动到视口前才加载资源，无需JS，性能更优。

二、属性值

• loading="eager"（默认）：解析标签立即加载。

• loading="lazy"：视口附近（约50–200px）才加载。

• auto：浏览器自动判断（等价省略）。

三、最简正确写法（必记）

<!-- 基础用法 --><img src="pic.jpg" loading="lazy" alt="..." width="800" height="600"><!-- 响应式+现代格式（推荐） --><picture>
  <source srcset="pic.avif" type="image/avif" loading="lazy">
  <source srcset="pic.webp" type="image/webp" loading="lazy">
  <img src="pic.jpg" loading="lazy" alt="..." width="800" height="600"></picture><!-- iframe懒加载 --><iframe src="https://xxx.com" loading="lazy"></iframe>

四、生效的4个硬性条件（缺一不可）

1. 有效src：<img>必须有真实src，不能仅data-src。

2. 明确宽高：width/height属性（非仅CSS），防止布局抖动（CLS）。

3. 非首屏+正常流：初始不在视口内；父级无transform/visibility:hidden等干扰。

4. 浏览器支持：Chrome、Edge、Firefox、Safari 15.4+；IE全不支持。

五、更佳实践（直接照抄）

1. 必加辅助属性

<img 
  src="pic.jpg" 
  loading="lazy" 
  decoding="async"  <!-- 解码不阻塞主线程 -->
  alt="..." 
  width="800" 
  height="600">

2. 首屏禁用，非首屏全加

• ✅ 文章长图、列表第3屏后缩略图、折叠区图片、动态插入图。

• ❌ Banner、Logo、首屏关键图（会拖慢首屏）。

3. 响应式完整写法

<img 
  src="small.jpg" 
  srcset="small.jpg 480w, large.jpg 1024w" 
  sizes="(max-width:480px) 100vw, 50vw"
  loading="lazy" 
  alt="..." 
  width="1024" 
  height="768">

六、常见坑（避坑清单）

• ❌ 只加loading="lazy"无宽高 → 布局抖动（CLS扣分）。

• ❌ 首屏图加lazy → 首屏白屏、LCP变差。

• ❌ 与JS懒加载库（如lazysizes）混用 → 加载两次或不加载。

• ❌ 父级transform/opacity:0 → 懒加载失效。

• ❌ src为空/占位符 → Chrome忽略lazy。

七、浏览器支持（2026）

• Chrome/Edge：全支持。

• Firefox：75+。

• Safari：15.4+（仅<img>，<iframe>不支持）。

• 兼容方案：低版本浏览器用Intersection Observer降级。

八、原理一句话

浏览器预扫描图片位置，进入视口前50–200px触发加载，不阻塞首屏，不延迟load事件。

九、总结（3句话记住）

1. 非首屏<img>/<iframe>加loading="lazy"，配width/height。

2. 首屏、无宽高、干扰样式会失效或反效果。

3. 原生零JS，性能更佳，现代浏览器全覆盖。

loading="lazy" 可直接复制模板 + 避坑极简清单

一、通用标准模板（直接套用）

1. 普通图片懒加载（推荐标配）

<img 
  src="图片地址.jpg"
  alt="描述文字"
  width="原图宽"
  height="原图高"
  loading="lazy"
  decoding="async">

2. 响应式 srcset 懒加载模板

<img 
  src="小图兜底.jpg"
  srcset="图1 768w, 图2 1200w"
  sizes="100vw"
  alt="描述"
  width="1200"
  height="600"
  loading="lazy"
  decoding="async">

3. picture 多格式兼容懒加载

<picture>
  <source srcset="图.avif" type="image/avif">
  <source srcset="图.webp" type="image/webp">
  <img 
    src="图.jpg"
    alt="描述"
    width="1000"
    height="500"
    loading="lazy"
    decoding="async"
  ></picture>

4. iframe 内嵌页面懒加载

<iframe 
  src="内嵌地址"
  loading="lazy"
  frameborder="0"
  allowfullscreen></iframe>

二、强制规则（记住这5条不出错）

1. 首屏大图、banner、logo 不要加 lazy，会拉低 LCP、首屏空白。

2. 加 lazy 必须写原生 width、height 属性，只写CSS宽高会布局抖动、CLS 扣分。

3. 不要和 lazysizes 等JS懒加载混用，容易重复请求或不加载。

4. 图片必须有真实 src，不能用空src、占位假地址，否则懒加载直接失效。

5. 父容器别加 transform、visibility:hidden、opacity:0，会检测不到视口。

三、哪些地方必加 lazy

• 文章正文所有插图

• 列表分页、瀑布流后面的图片

• 折叠面板、弹窗里的图片

• 底部推荐、侧边栏非首屏图

• 页面所有 iframe 嵌入

四、简写口诀

非首屏就加懒，必带宽高alt； 首屏坚决不加，不和JS混用； 真实src不能少，父级不乱加变形。

直接复制上面模板改下地址、宽高就能用，全站统一规范。

loading="lazy" 能用的所有元素

一、官方原生支持只有 2 个

1. <img> 图片

常规图片、背景图除外，所有 <img> 标签可用。

2. <iframe> 内嵌框架

网页嵌入、视频嵌入、广告iframe、第三方插件iframe 都能用。

<iframe src="xxx" loading="lazy"></iframe>

二、重点：其他所有标签都原生不支持

❌ 以下直接加 loading="lazy" 完全无效，浏览器不认：

• <video> 视频标签

• `` 音频

• <script> 脚本

• <link> 样式、图标

• <picture> 本身（只能给里面的 <img> 加）

• <source> 不支持 loading

• 背景图片（css background-image）

• svg、canvas、div 等任何块级元素

三、很多人踩的坑（必看）

1. 给 video 加 loading="lazy" 没用，浏览器忽略，视频懒加载只能自己写 JS 监听视口。

2. 给 source 加 loading="lazy" picture 里只有内层 <img> 生效，source 加了白加。

3. 想用它懒加载 JS/CSS 不行，script、link 只能用 defer / async 或动态 JS 插入。

四、总结一句话

原生 loading="lazy" 只认：img + iframe 其余所有元素，一律不生效，别浪费属性。