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">

Coba sendiri

Syarat

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

Nilai sifat

Value Description
eager Lain. Muat gambar segera.
lazy Muat gambar dengan lembut sehingga keadaan tertentu memenuhi.

Dukungan pelayar

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 Tidak disokong 64.0

HTML <img> 标籤