<img src="" loading="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / フォーム関連要素 / インタラクティブ・コンテンツ（usemap属性がある場合） / パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | 無し（空要素） |
img要素に loading="" を追加すると、画像が読み込まれるタイミングを指定することができます。
この機能を使うことで、いわゆるレイジーロード（遅延読み込み）を実装できるようになります。（これは、文書の表示速度の改善や転送量の軽減に役立ちます）
<img src="example.jpg" alt="サンプル" loading="lazy">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
src="" |
画像の指定 | URL | 埋め込む画像ファイルのURL |
| 任意属性 | |||
loading="" |
 画像を読み込むタイミング |
lazy |
ビューポートに表示されるタイミングで読み込む |
eager |
ページのロード時に直ちに読み込む（既定値） | ||
値の詳細は次のようになります。
lazy- この画像は、ビューポート（表示領域）に表示されるタイミングで読み込まれます。ページロード時にビューポートに入っている画像は直ちに読み込まれ、それ以外の画像はスクロールに合わせて順次読み込まれていきます。
eager（既定値）- この画像は、ビューポートの外にあったとしても、ページロード時に直ちに読み込まれます。
次の例では、ビューポートに表示されるタイミングで読み込まれるように指定しています。
- 画像が読み込まれる際にレイアウトが動いてしまうことを避けるため、同時に画像の表示サイズも指定しています。
<img src="example.jpg" alt="サンプル" loading="lazy" width="300" height="150">
使用例
<h1>画像の遅延読み込み</h1>
<p>スクロールしていくと画像が順次読み込まれていきます。</p>
<p>※このサンプルでは、div要素内のp要素にマージンが設定されています。</p>
<div>
<p><img src="lazy1.png" alt="Lazy1" loading="lazy" width="400" height="250"></p>
<p><img src="lazy2.png" alt="Lazy2" loading="lazy" width="400" height="250"></p>
<p><img src="lazy3.png" alt="Lazy3" loading="lazy" width="400" height="250"></p>
...
</div>
- 表示例
- 上記の例では、画像サイズが小さいこともあり、遅延していることがほとんど分かりませんでした…。画像サイズや通信環境によっては、属性指定の効果が出てくると思います。