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

親自試一試

語法

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