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> タグ