Window: load イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。 これは DOMContentLoaded が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。

このイベントはキャンセル不可で、バブリングしません。

メモ: たとえ bubblestrue に初期化されていても、 load という名前のイベントはすべて window に伝搬しません。 window 上で load イベントを捕捉するには、 load イベントを直接 window に配信する必要があります。

メモ: メイン文書が読み込まれたときに配信される load イベントは window に配信されますが、 2 つのプロパティが変更されています。 targetdocument であり、pathundefined です。これら 2 つのプロパティは過去との互換性のために変更されています。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("load", (event) => {});

onload = (event) => {};

イベント型

一般的な Event です。

ページが完全に読み込まれたときに、メッセージを記録します。

js
window.addEventListener("load", (event) => {
  console.log("ページが完全に読み込まれました");
});

同じですが、 onload イベントハンドラープロパティの場合です。

js
window.onload = (event) => {
  console.log("page is fully loaded");
};

ライブデモ

HTML

html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

JavaScript

js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += `DOMContentLoaded\n`;
});

結果

仕様書

Specification
UI Events
# event-type-load
HTML
# delay-the-load-event

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
load event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報