先生と生徒の会話形式で理解しよう

生徒

「Webページが完全に読み込まれたタイミングで処理をしたい場合、どのイベントを使えばいいですか？」

先生

「JavaScriptには主にDOMContentLoadedとloadの2つのイベントがあります。それぞれ動作のタイミングが違うので使い分けが重要です。」

生徒

「違いって具体的には何ですか？」

先生

「簡単に言うと、DOMContentLoadedはHTMLの読み込みが終わったタイミング、loadは画像やスタイルシートなども含めたすべての読み込みが終わったタイミングで発火します。」

1. DOMContentLoadedイベントとは？

DOMContentLoadedは、HTML文書の解析が完了してDOMツリーが構築されたときに発火します。外部リソースの読み込みを待たずに実行できるので、スクリプトの初期化処理によく使われます。


document.addEventListener("DOMContentLoaded", () => {
  console.log("DOMの読み込みが完了しました。");
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    alert("ボタンがクリックされました！");
  });
});

このように、DOMが使える状態になったらすぐにスクリプトを実行できるので、ユーザーの操作に素早く対応できます。

2. loadイベントとは？

loadイベントは、ページ内のすべてのリソース、例えば画像、スタイルシート、iframeなどが完全に読み込まれたあとに発火します。ページ全体の読み込み完了を確認したい場合に使います。


window.addEventListener("load", () => {
  console.log("ページ全体の読み込みが完了しました。");
  const images = document.querySelectorAll("img");
  console.log("画像の数:", images.length);
});

画像が多いページではloadイベントの発火が遅れることがあります。ユーザーにすぐインタラクションを提供したい場合はDOMContentLoadedを使う方が適しています。