HTMLIFrameElement: loading プロパティ
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
loading は HTMLIFrameElement インターフェイスのプロパティで、ユーザーエージェントに iframe をページ読み込み時に即座に読み込むか、必要な時にのみ読み込むかを指定するヒントを提供する文字列です。
これは、文書内のコンテンツの読み込みを最適化するために使用することができます。ページが読み込まれたときに表示されている iframe は、すぐに（熱心に）ダウンロードすることができます。一方、最初のページ読み込み時に画面外にある可能性が高い iframe は、遅延してダウンロードすることができます。つまり、ウィンドウの視覚的ビューポートに表示される直前にダウンロードすることができます。
値
iframe の読み込みを最適にスケジュールする方法について、ユーザーエージェントにヒントを提供する文字列。 可能な値は以下のとおりです。
使用上のメモ
JavaScript を有効にする必要がある
JavaScript が有効になっている場合、このプロパティの値に関係なく、読み込みが遅延されます。
これは追跡防止策です。なぜなら、スクリプトが無効になっている場合でも、ユーザーエージェントが遅延読み込みをサポートしている場合、サーバーがリクエストされた iframe の数をいつリクエストされたかを追跡できるように、ページのマークアップに iframe を戦略的に配置することで、セッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能なサイトが存在するからです。
load イベントのタイミング
load イベントは、文書内の処理がすべて完了した時点で発行されます。
遅延読み込みされた iframe は、それが視覚的ビューポート内にあり、したがってページの読み込み時に取得されたとしても、load イベントのタイミングには影響しません。
文書内の熱心に読み込まれた iframe はすべて、load イベントが発生する前に取得されていなければなりません。
例
例えば、下記のように、遅延読み込みの iframe を定義し、それを文書内の <div> に追加することができます。
フレームは、表示される際にのみ読み込まれます。
// Define iframe with lazy loading
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
iframe.width = 320;
iframe.height = 240;
iframe.loading = "lazy";
// Add to div element with class named frameDiv
const frameDiv = document.querySelector("div.frameDiv");
frameDiv.appendChild(iframe);
仕様書
| Specification |
|---|
| HTML # dom-iframe-loading |
ブラウザーの互換性
Loading…
関連情報
<iframe>要素- ウェブパフォーマンス （MDN 学習領域）
- 遅延読み込み （MDN ウェブパフォーマンスガイド）
- It's time to lazy-load offscreen iframes! (web.dev)