【徹底解説】JavaScript: window.onload vs document.onload と DOMContentLoaded

JavaScript: window.onload vs document.onload の違い

window.onload と document.onload は、JavaScript でウェブページの読み込み完了を検知するためのイベントハンドラです。 どちらも似ていますが、いくつかの重要な違いがあります。

イベント発生タイミング

• window.onload は、ページ全体の読み込み が完了したときに発生します。 これは、HTML、CSS、JavaScript、画像などのすべてのコンテンツが読み込まれたことを意味します。
• document.onload は、HTML ドキュメントの読み込み が完了したときに発生します。 これは、HTML コードが解析され、DOM ツリーが構築されたことを意味しますが、画像などの外部リソースはまだ読み込まれていない可能性があります。

使用例

• window.onload は、ページ全体の読み込み後に実行する必要があるコードに使用されます。 例えば、ページ全体のアニメーションを開始したり、ユーザーにメッセージを表示したりするのに使用できます。
• document.onload は、HTML ドキュメントの読み込み後に実行する必要があるコードに使用されます。 例えば、DOM 操作を行うコードや、外部リソースを読み込むコードに使用できます。

比較表

注意点

• document.onload は、IE 8 以前ではサポートされていません。
• window.onload は、複数のイベントハンドラを設定できますが、document.onload は 1 つしか設定できません。

window.onload と document.onload は、どちらもページの読み込み完了を検知するためのイベントハンドラですが、発生タイミングと使用例が異なるので、状況に応じて使い分けることが重要です。

• DOMContentLoaded イベントも、ページの読み込み完了を検知するためのイベントハンドラとして使用できます。 document.onload よりも早く発生するため、ページの読み込み中にユーザーに何か表示したい場合などに便利です。

// window.onload を使用

window.onload = function() {
  // ページ全体の読み込み完了後に実行したいコード
  alert("ページ全体の読み込みが完了しました！");

  // 例：ページ全体のアニメーションを開始
  const element = document.getElementById("my-element");
  element.classList.add("animated");

  // 例：ユーザーにメッセージを表示
  const message = document.getElementById("message");
  message.textContent = "ようこそ！";
};

// document.onload を使用

document.onload = function() {
  // HTML ドキュメントの読み込み完了後に実行したいコード
  alert("HTML ドキュメントの読み込みが完了しました！");

  // 例：DOM 操作を行う
  const element = document.getElementById("my-element");
  element.style.color = "red";

  // 例：外部リソースを読み込む
  const script = document.createElement("script");
  script.src = "https://example.com/script.js";
  document.head.appendChild(script);
};

実行方法

上記のコードを HTML ファイルに保存し、ブラウザで開きます。 ページが読み込まれると、それぞれのイベントハンドラが実行され、アラートが表示されます。

上記のコードはあくまでもサンプルなので、必要に応じて変更してください。

ページ読み込み完了を検知する他の方法

DOMContentLoaded イベントは、HTML ドキュメントの解析が完了し、DOM ツリーが構築されたときに発生します。 画像などの外部リソースはまだ読み込まれていない可能性がありますが、多くの場合、ページの主要なコンテンツは読み込まれているので、ユーザーに何か表示したい場合などに便利です。

document.addEventListener("DOMContentLoaded", function() {
  // ページの主要なコンテンツが読み込まれた後に実行したいコード
  alert("ページの主要なコンテンツが読み込まれました！");

  // 例：ページ全体のアニメーションを開始
  const element = document.getElementById("my-element");
  element.classList.add("animated");

  // 例：ユーザーにメッセージを表示
  const message = document.getElementById("message");
  message.textContent = "ようこそ！";
});

readyState プロパティ

document.readyState プロパティは、ドキュメントの読み込み状態を表します。 以下の値があります。

• "loading": 読み込み中
• "interactive": HTML ドキュメントの解析が完了し、DOM ツリーが構築された
• "complete": ページ全体の読み込みが完了

const checkReadyState = function() {
  if (document.readyState === "complete") {
    // ページ全体の読み込みが完了した後に実行したいコード
    alert("ページ全体の読み込みが完了しました！");

    // 例：ページ全体のアニメーションを開始
    const element = document.getElementById("my-element");
    element.classList.add("animated");

    // 例：ユーザーにメッセージを表示
    const message = document.getElementById("message");
    message.textContent = "ようこそ！";

    // イベントリスナーの削除
    document.removeEventListener("readystatechange", checkReadyState);
  }
};

// readystatechange イベントリスナーを追加
document.addEventListener("readystatechange", checkReadyState);

MutationObserver は、DOM の変更を監視する API です。 これを利用して、ページ全体の読み込み完了を検知することもできます。

const observer = new MutationObserver(function(mutations) {
  for (const mutation of mutations) {
    if (mutation.type === "childList" && mutation.target === document.body) {
      // ページ全体の読み込みが完了した後に実行したいコード
      alert("ページ全体の読み込みが完了しました！");

      // 例：ページ全体のアニメーションを開始
      const element = document.getElementById("my-element");
      element.classList.add("animated");

      // 例：ユーザーにメッセージを表示
      const message = document.getElementById("message");
      message.textContent = "ようこそ！";

      // オブザーバーの停止
      observer.disconnect();
    }
  }
});

// body 要素を監視
observer.observe(document.body, {
  childList: true
});