HTML <img> loading属性
例
ページ下部のいくつかの画像に遅延読み込みを追加し、マウスがその画像の位置までスクロールしたときのみ表示されます：
<img src="/images/wedding.jpeg" alt="Wedding" style="width:100%">
<img src="/images/rocks.jpeg" alt="Rocks" style="width:100%">
<!--遅延読み込みを設定した画像-->
<img src="/images/paris.jpeg" alt="Paris" style="width:100%" loading="lazy">
<img src="/images/nature.jpeg" alt="Nature" style="width:100%" loading="lazy">
<img src="/images/underwater.jpeg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/images/ocean.jpeg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/images/mountainskies.jpeg" alt="Mountains" style="width:100%" loading="lazy">
試してみる »
ブラウザサポート
| 属性 | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
定義と使い方
loading 属性は、ブラウザが画像を即座に読み込むか、遅延読み込みするかを指定します。
設定loading="lazy"マウスがその画像の位置までスクロールしたときのみ表示されます。
構文
<img src="URL.html" loading="eager|lazy">
属性値
| 值 | 説明 |
|---|---|
| eager | デフォルトでは、画像は即座に読み込まれます。 |
| lazy | 画像は遅延読み込みされ、マウスがその画像の位置までスクロールしたときのみ表示されます。 |
HTML <img> タグ その他の拡張