HTML <img> กำลัง โหลดแอตทริบิวต์
ตัวอย่าง
เพิ่มการโหลดแบบ Lazy Loading ให้กับรูปภาพในครึ่งหน้าล่าง:
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img
src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!--
off-screen images -->
<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"
เฉพาะรูปภาพที่อยู่ในตำแหน่งครึ่งหน้าล่างเท่านั้น
รองรับเบราว์เซอร์
| Attribute | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
ไวยากรณ์
<img src="URL" loading="eager|lazy">
ค่าแอตทริบิวต์
| Value | Description |
|---|---|
| eager | Default. Loads an image immediately |
| lazy | Defer loading of images until some conditions are met |
❮ แท็ก HTML <img>