HTML <img> loading 属性

HTML <img> 标籤

定义和用法

loading 属性规定浏览器是否应立即加载图像，还是推迟加载屏幕外的图像，直到例如用户滚动到它们附近。

提示：请仅将 loading="lazy" 添加到位于屏幕下方的图像。

实例

向首屏下方的图像添加延迟加载：

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">
<!-- 屏幕外的图像 -->
<img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="สวนกีฬา" style="width:100%" loading="lazy">

ทดลองด้วยตัวเอง

สyntax

<img src="URL" loading="eager|lazy">

ค่าของ属性

ค่า คำอธิบาย
eager เริ่มต้นโดยมาตรฐาน. โหลดภาพทันที
lazy โหลดภาพละแบบลัทธิหลังจากที่เกิดเงื่อนไขบางอย่าง

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 ไม่สนับสนุน 64.0

HTML <img> 标籤