DOMとコンテンツの読み込み

2024-04-16

jQueryでよく使われる $(window).load() と $(document).ready() 関数は、どちらもページの読み込みに関わるイベントハンドラですが、実行タイミングと用途が異なります。それぞれの違いを理解することで、適切な場面で使い分けることができ、より効率的なコードを書くことができます。

DOMとコンテンツの読み込み

まず、以下の2つの概念を理解することが重要です。

DOM (Document Object Model): HTMLドキュメントをツリー構造で表現したもの
コンテンツ: HTMLだけでなく、画像、JavaScriptファイル、CSSファイルなどのすべてのリソース

$(document).ready()

DOMが構築完了した時点で実行されるイベントハンドラ
HTML要素へのアクセスや操作が可能になる
画像などのコンテンツ読み込みを待たずに実行される

例:

$(document).ready(function() {
  // DOM要素への操作
  $("#myElement").hide();

  // イベントハンドラの登録
  $("#myButton").click(function() {
    alert("ボタンがクリックされました！");
  });
});

$(window).load()

DOMとすべてのコンテンツの読み込みが完了した時点で実行されるイベントハンドラ
画像などの読み込み完了後に実行したい処理に適している

$(window).load(function() {
  // 画像の読み込み完了後に実行する処理
  $("#myImage").fadeIn();
});

使い分けのポイント

DOM操作やイベントハンドラの登録は $(document).ready() を使用する
画像などの読み込み完了後に実行する処理は $(window).load() を使用する
一般的には、$(document).ready() を使用する方が多い

$(document).ready() は DOM構築完了時に実行
$(window).load() は DOMとすべてのコンテンツ読み込み完了時に実行
それぞれの用途に合わせて使い分ける

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMとコンテンツの読み込み</title>
  <style>
    #myImage {
      display: none;
    }
  </style>
</head>
<body>
  <h1>DOMとコンテンツの読み込み</h1>

  <p id="myElement">この要素はDOMが構築完了した時点で非表示になります。</p>

  <img id="myImage" src="image.jpg" alt="画像">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // DOM操作
      $("#myElement").hide();

      // イベントハンドラの登録
      $("#myButton").click(function() {
        alert("ボタンがクリックされました！");
      });
    });

    $(window).load(function() {
      // 画像の読み込み完了後に実行する処理
      $("#myImage").fadeIn();
    });
  </script>
</body>
</html>

説明

HTML
- <p id="myElement"> 要素は $(document).ready() 関数内で非表示に設定されます。これは、DOMが構築完了した時点で実行されるため、ページが表示される前に要素が非表示になります。
- <img id="myImage"> 要素は最初は非表示で、$(window).load() 関数内でフェードインされます。これは、画像の読み込み完了後に実行されるため、画像が表示されるまで要素が非表示になります。
JavaScript
- $(document).ready() 関数内のコードは、DOMが構築完了した時点で実行されます。この例では、#myElement 要素を非表示に設定し、#myButton 要素にクリックイベントハンドラを登録しています。
- $(window).load() 関数内のコードは、DOMとすべてのコンテンツの読み込みが完了した時点で実行されます。この例では、#myImage 要素をフェードインさせています。

このサンプルコードを実行すると、以下の動作を確認できます。

ページが表示されると、#myElement 要素は非表示になります。
#myImage 要素は最初は非表示ですが、画像が読み込まれるとフェードインして表示されます。
#myButton 要素をクリックすると、アラートダイアログが表示されます。

このように、$(document).ready() と $(window).load() 関数を使い分けることで、DOM操作とコンテンツ読み込み処理を適切に制御することができます。

$(window).load() と $(document).ready() 以外の方法

DOMContentLoaded イベント

jQuery 1.9以降で使用可能

$(document).on('DOMContentLoaded', function() {
  // DOM操作
  $("#myElement").hide();

  // イベントハンドラの登録
  $("#myButton").click(function() {
    alert("ボタンがクリックされました！");
  });
});

window.addEventListener('load', ...)

jQueryに依存しない方法

window.addEventListener('load', function() {
  // 画像の読み込み完了後に実行する処理
  $("#myImage").fadeIn();
});

MutationObserver API

DOMの変化を監視するAPI
特定の要素が読み込まれたタイミングを検知したい場合に適している

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 特定の要素が追加された場合の処理
      $("#myImage").fadeIn();
    }
  });
});

observer.observe(document.body, {
  childList: true
});

Promise.all()

複数の非同期処理が完了したタイミングを検知する方法
画像などの読み込み処理を非同期で実行する場合に適している

const imagePromise = new Promise(function(resolve, reject) {
  const image = new Image();
  image.onload = resolve;
  image.onerror = reject;
  image.src = 'image.jpg';
});

Promise.all([imagePromise]).then(function() {
  // 画像の読み込み完了後に実行する処理
  $("#myImage").fadeIn();
});

使い分け

一般的なDOM操作やイベントハンドラ登録には $(document).ready() または DOMContentLoaded イベントを使用
画像などのコンテンツ読み込み完了後に実行する処理には $(window).load() または window.addEventListener('load', ...) を使用する
特定の要素の読み込みを検知したい場合は MutationObserver API を使用する
非同期処理の完了をまとめて検知したい場合は Promise.all() を使用する