HTML <img> loading 属性
示例
对折叠以下的图像添加延迟加载
<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 属性指定浏览器应该立即加载图像还是延迟加载屏幕外图像，例如，直到用户滚动到它们附近。
提示： 仅对位于折叠以下的图像添加 loading="lazy"。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | 不支持 | 64.0 |
语法
<img src="URL" loading="eager|lazy">
属性值
| 值 | 描述 |
|---|---|
| eager | 默认值。立即加载图像 |
| lazy | 延迟加载图像，直到满足某些条件 |
❮ HTML <img> 标签
