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> 標籤
