【JavaScript】addEventListenerのloadとDOMContentLoadedの違いを実例で解説（実行タイミングや用途）

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

JavaScritpにはページの要素を読み込んだ後に処理を実行するイベントハンドラaddEventListenerのタイプとして「load」と「DOMContentLoaded」があります。

それぞれで実行タイミングが異なるため、狙った通りの処理をするためには明確に使分ける必要があります。

ここでは、addEventListenerの「DOMContentLoaded」と「load」の違いを実例を用いて解説しています。


「DOMContentLoaded」と「load」の違い

実行タイミングの違い

最初に結論から言うと、「DOMContentLoaded」と「load」の違いは、HTMLのみ読みこんだときに実行したいか？それとも、CSSや画像などの外部コンテンツも全て読み込んだあとに実行したいか？の違いです。

「DOMContentLoaded」と「load」の違い（実行タイミング）
  • DOMContentLoaded・・・HTMLのみ
    HTML文書が完全に読み込まれ、解析されたときに発生します。スタイルシートや画像などの外部リソースが完全に読み込まれるのを待たずに発生します。
  • load・・・ページ全体
    HTML文書およびすべてのスタイルシート、画像、サブフレームなどの外部リソースが完全に読み込まれたときに発生します。


用途の違い

「DOMContentLoaded」と「load」は読込タイミングの違いから、以下のような用途の使い分けとなります。

DOMContentLoaded を使用する場合
  • DOM要素の操作が必要な場合（例えば、フォームフィールドの初期化、DOMツリーの要素にイベントリスナーを追加するなど）。
  • ページのレイアウトに依存しない操作を実行する場合。
load を使用する場合
  • 画像やスタイルシートの読み込みが完了していることを前提とする操作が必要な場合（例えば、画像の位置やサイズの調整、外部スタイルシートの適用が完了した後のレイアウト調整など）。
  • ページ全体のリソースの準備が必要な場合（例えば、全体的な初期化処理）。



DOMContentLoaded

document.addEventListener('DOMContentLoaded', () => {});
documentとは？

documentオブジェクトはウェブページのコンテンツ全体を表します。

DOMの変更、キー入力、マウスイベントなど、DOMツリーに関するイベントにリスナーを追加する際に使用されます。


実行タイミング

「DOMContentLoaded」はHTML文書が完全に読み込まれ、解析されたときに発生します。スタイルシートや画像などの外部リソースが完全に読み込まれるのを待たずに発生します。


用途

DOM要素を操作するために使用されます。スクリプトが実行される前にDOMツリーが完全に構築されるのを確実にするために便利です。

CSSなどのレイアウトに依存しない変更を加えるときや、関数を先に読み込んでおく場合（実行はしない）などに使います。


実例

HTMLの要素を変更したい場合、「DOMContentLoaded」を使うと、DOMツリー（HTML）が完全に構築された後に実行することができます。

例えば、ページ内の<h1>要素のテキストを変更する場合は以下のようにします。

document.addEventListener('DOMContentLoaded', () => {
  // DOM要素にアクセスし、操作を開始
  const header = document.querySelector('h1');
  header.textContent = 'DOM読み込み完了！';
});



load

window.addEventListener('load', () => {});
windowとは？

windowオブジェクトはブラウザのウィンドウ全体を表します。

リサイズ、スクロール、読み込み完了など、ページ全体に関するイベントにリスナーを追加する際に使用します。


実行タイミング

「load」はページ全体（HTML文書およびすべてのスタイルシート、画像、サブフレームなどの外部リソース）が完全に読み込まれたときに発生します。


用途

ページ上のすべてのリソースが利用可能であることが前提となる操作をするときに使います。
例えば、画像のサイズを取得して操作する場合などに使います。


実例

ページ内のすべての画像が読み込まれた後に実行し、各画像の高さをログに出力するコードは以下のようになります。

window.addEventListener('load', () => {
  // すべてのリソースが完全に読み込まれた後に実行
  const images = document.querySelectorAll('img');
  images.forEach(img => {
    console.log(`画像の高さ: ${img.height}`);
  });
});



実例3：「DOMContentLoaded」と「load」を同時に使う

処理によっては「DOMContentLoaded」と「load」を1つの関数の中で使うことがあります。

例えば、DOM読込みと同時に「end_loader」という関数を読み込んでおき、ページ全体の読み込みが完了したら、「end_loader」を実行する場合は以下のように記述します。

document.addEventListener('DOMContentLoaded', () => {
  
  // ローダー終了
  function end_loader() {
    const loader = document.getElementById('my-custom-loader-wrapper');
    loader.style.transition = 'opacity 0.4s';
    loader.style.opacity = '0';
    setTimeout(() => {
      loader.style.display = 'none';
    }, 400);
  }

  // タイマー処理
  window.addEventListener('load', () => {
    setTimeout(() => {
      end_loader();
    }, 3000);
  });
  
});


タイトルとURLをコピーしました