このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

img”要素~“loading”属性HTML Living Standardで定義

記事July 7th,2020
画像の読み込みのタイミングを指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

loading”属性について

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

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

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

指定できる値

属性値 説明
lazy 画像がビューポートに入る直前まで読み込まない
eager 画像を直ちに読み込む

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

サンプルコード

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

サンプル画像

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

サンプル画像

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク