HTML <img> loading 属性
示例
为屏幕下方（below the fold）的图片添加懒加载
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- 屏幕外的图片 -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
自己动手试一试 »
定义和用法
loading 属性指定浏览器是立即加载图片，还是延迟加载屏幕外（off-screen）的图片，直到例如用户滚动到它们附近。
提示：仅为屏幕下方（below the fold）的图片添加 loading="lazy"。
浏览器支持
| Attribute | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | 不支持 | 64.0 |
语法
<img src="URL" loading="eager|lazy">
属性值
| 值 | 描述 |
|---|---|
| eager | 默认。立即加载图片 |
| lazy | 延迟加载图片，直到满足某些条件 |
❮ HTML <img> 标签
