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