DEMO

参考サイト

ヤナギ

Window: load イベント

発生タイミング

ページ全体が、リソース（スタイルシート、画像など）を含めて読み込まれたときに発生

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

// onload イベントハンドラープロパティの場合
window.onload = (event) => {
  console.log("page is fully loaded");
};

ヤナギ

Document: DOMContentLoaded イベント

発生タイミング

ドキュメントの読み込み、HTMLのパース、DOMの解釈(DOMツリーの構築)、遅延実行スクリプトの実行が完了したら発生

リソース（スタイルシート、画像、サブフレーム）の読み込みが完了するのを待たない

document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});

より推奨な書き方

このイベントはスクリプト実行の機会がある前に発生することがあるため、 Document.readyState プロパティを利用して読み込み状態のチェックをしてからリスナーを追加すると無駄がない。

function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  // Loading hasn't finished yet
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` has already fired
  doSomething();
}

ヤナギ

Document: readystatechange イベント

発生タイミング

文書の readyState 属性が変化したときに発生
（htmlファイルの読み込み状態の変化を検知するイベント）

Document: readyState プロパティとは

Document: readyState プロパティ

document の読み込み状態を記述する。

`loading`

htmlファイルの読み込み開始〜完了までの状態

`interactive`

htmlファイルの読み込みが完了した状態

サブリソース（スクリプト、画像、スタイルシート、フレームなど）はまだ読み込み中

`complete`

htmlファイル及びサブリソースの読み込みがどちらも完了した状態

DOMContentLoaded イベントの代替として使う場合

document.onreadystatechange = () => {
  if (document.readyState === "interactive") {
    // 記述
  }
};

load イベントの代替として使う場合

document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    // 記述
  }
};

DOM の挿入や変更のイベントリスナーとして DOMContentLoaded の前に使用

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    // initLoader
  } else if (event.target.readyState === "complete") {
    // initApp
  }
});

ヤナギ

各イベントの発生順序

readyState プロパティの切り替わりとDOMContentLoadedイベント・loadイベントの2つのイベントは以下のように対応している。

readyState が loading 状態になる
readyState が interactive 状態になる => DOMContentLoadedイベントの発火
readyState が complete 状態になる => loadイベントの発火

プロパティの切り替わりと対応するイベントの発火はほぼ同時タイミングだが、切り替わりの方がわずかに早い。

defer属性を付与したscript要素の実行タイミング

readyState が interactive 状態になる
defer属性の付与されたscript要素の実行（複数の場合は上から順に実行）
DOMContentLoadedイベントの発火