JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう

1. DOMContentLoadedイベントとは？

1. DOMContentLoadedイベントとは？

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

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

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

2. loadイベントとは？

2. loadイベントとは？

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

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

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

3. DOMContentLoadedとloadの使い分け

3. DOMContentLoadedとloadの使い分け

簡単に使い分けをまとめると次の通りです。

• ページのHTML構造だけを操作したいとき → DOMContentLoaded
• 画像や外部リソースの読み込み完了を待ってから処理したいとき → load

例えば、ページの初期化処理やボタンのクリックイベントの設定はDOMContentLoadedで十分です。一方で、ページ内のすべての画像を確認してレイアウトを調整したい場合はloadを使うと安全です。

4. 注意点とおすすめの書き方

4. 注意点とおすすめの書き方

非同期的にHTMLや画像が読み込まれる現代のWebでは、イベントのタイミングを正しく理解することが重要です。以下の点に注意しましょう。

• JavaScriptをheadに書く場合はDOMContentLoadedでDOMを操作する。
• 外部画像や大きなメディアファイルの読み込みに依存する処理はloadを使う。
• 両方のイベントを混同すると、処理が早すぎたり遅すぎたりするのでタイミングを意識する。

正しいイベントを選ぶことで、ユーザーに快適な操作体験を提供できます。