May 30th,2022
＃
“loading”属性について
“loading”属性は埋め込まれた文書の読み込みのタイミングを指定する属性です。従来から画面外にあるコンテンツの読み込みを遅らせる“Lazy Load(遅延読み込み)”はJavascriptを使って実装されてきましたが、“loading”属性は“Lazy Load”をHTMLだけで行うための属性です。
“loading”属性で埋め込まれた文書を読み込むタイミングを“lazy”と指定するとその埋め込まれた文書がビューポートに入る直前まで読み込みが保留される“Lazy Load”の状態となります。既定では文書を読み込んだ時にすべての埋め込まれた文書が読み込まれるため、多くの埋め込まれた文書が埋め込まれた文書を表示するのには時間がかかってしまいます。“Lazy Load”を利用するとユーザーがその時点で見ることのできる埋め込まれた文書だけを読み込むので読み込みの速度が速く感じられるほか、通信量も削減することができます。
“loading”属性を指定しない場合の既定値は埋め込まれた文書を直ちに読み込む“eager”となります。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| lazy | 埋め込まれた文書がビューポートに入る直前まで読み込まない |
| eager | 埋め込まれた文書を直ちに読み込む |
“loading”属性は列挙属性です。無効な値が指定された場合の既定値と値が不在の場合の既定値はともに“eager”です。
＃
