“img”要素~“loading”属性

“loading”属性について

“loading”属性は画像の読み込みのタイミングを指定する属性です。従来から画面外にあるコンテンツの読み込みを遅らせる“Lazy Load(遅延読み込み)”はJavascriptを使って実装されてきましたが、“loading”属性は“Lazy Load”をHTMLだけで行うための属性です。

“loading”属性で画像を読み込むタイミングを“lazy”と指定するとその画像がビューポートに入る直前まで読み込みが保留される“Lazy Load”の状態となります。既定では文書を読み込んだ時にすべての画像が読み込まれるため、多くの画像が埋め込まれた文書を表示するのには時間がかかってしまいます。“Lazy Load”を利用するとユーザーがその時点で見ることのできる画像だけを読み込むので読み込みの速度が速く感じられるほか、通信量も削減することができます。

“loading”属性を指定しない場合の既定値は画像を直ちに読み込む“eager”となります。

指定できる値

“loading”属性は列挙属性です。無効な値が指定された場合の既定値と値が不在の場合の既定値はともに“eager”です。

サンプルコード

読み込みを遅延する
<img src="sample.png" alt="サンプル画像" loading="lazy">


読み込みを遅延する

直ちに読み込む
<img src="sample.png" alt="サンプル画像" loading="lazy">


直ちに読み込む