loading属性【loading attribute】

概要

loading属性（loading attribute）とは、HTMLの要素(タグ)の中で設定することができる属性(attribute)の一つで、画像などの読み込みのタイミングを指定するもの。遅延読み込みを明示的に指示することができる。

img要素やiframe要素など、文書内に埋め込んで表示する外部の別の資源を指定する要素で指定することができる。属性値は3種類あり、「eager」はページ読み込み時点ですぐに外部資源の読み込みも開始する。loading属性が実装される前のWebブラウザの挙動と同じである。

「lazy」を指定すると、いわゆる「遅延読み込み」（lazy loading）を行う。ページ読み込み時点では埋め込み要素の読み込みは行わず、（ウィンドウをスクロールするなどして）実際に画面上で可視状態になった段階で読み込みを始める。「auto」は即時読み込みか遅延読み込みかをブラウザに任せる。

縦長で下の方に大量の画像などが並んでいるようなページでは、実際に表示する必要に迫られるまで読み込みを行わないため、無駄な通信を減らすことができ、アクセスを指示してから操作可能になるまでの時間も短縮される。ただし、埋め込み要素のサイズは読み込まれるまで分からないため、width属性やheight属性を指定しておかないと後からレイアウトが大きくずれてしまう。

(2023.4.13更新)