Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/HTMLIFrameElement/loading below:

HTMLIFrameElement: loading プãƒãƒ‘ティ - Web API

Baseline 2023

Newly available

loading は HTMLIFrameElement インターフェイスのプロパティで、ユーザーエージェントに iframe をページ読み込み時に即座に読み込むか、必要な時にのみ読み込むかを指定するヒントを提供する文字列です。

これは、文書内のコンテンツの読み込みを最適化するために使用することができます。ページが読み込まれたときに表示されている iframe は、すぐに（熱心に）ダウンロードすることができます。一方、最初のページ読み込み時に画面外にある可能性が高い iframe は、遅延してダウンロードすることができます。つまり、ウィンドウの視覚的ビューポートに表示される直前にダウンロードすることができます。

iframe の読み込みを最適にスケジュールする方法について、ユーザーエージェントにヒントを提供する文字列。 可能な値は以下のとおりです。

eager

要素が処理されたらすぐに iframe を読み込みます。 これが既定値です。

lazy

ブラウザーが近い将来に必要になる可能性が高いと判断した時点で、iframe を読み込みます。

JavaScript が有効になっている場合、このプロパティの値に関係なく、読み込みが遅延されます。

これは追跡防止策です。なぜなら、スクリプトが無効になっている場合でも、ユーザーエージェントが遅延読み込みをサポートしている場合、サーバーがリクエストされた iframe の数をいつリクエストされたかを追跡できるように、ページのマークアップに iframe を戦略的に配置することで、セッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能なサイトが存在するからです。

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);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4