window.onloadとonDocumentReadyの違いとは？実行タイミングと使い分けを徹底解説

Webページがブラウザに読み込まれたタイミングでJavaScriptを実行したい場面は多くあります。その際によく使われるのが「window.onload」と「onDocumentReady（jQueryでは $(document).ready()）」です。どちらもページ読み込み時に処理を行うための仕組みですが、実行されるタイミングや挙動には重要な違いがあります。本記事では、それぞれの特徴と使い分けのポイントをわかりやすく解説します。

window.onload の特徴

window.onload は、DOMツリーの構築に加えて、画像・オブジェクト・スタイルシートなどページ内のすべてのリソースの読み込みが完全に完了した後にコードを実行します。そのため、画像のサイズを取得したり、すべての要素が確実に表示された状態で処理を開始したい場合には適しています。

一方で、リソースの読み込み完了を待つため、画像が多いページなどでは実行までの時間が長くなるというデメリットもあります。

window.onload = function() {
  // DOMツリー＋画像など全リソースの読み込み完了後に実行される
};

onDocumentReady の特徴

onDocumentReady は、DOMツリーの構築が完了した時点でコードを実行し、画像などの外部リソースの読み込み完了は待ちません。これにより、ユーザーがページを操作できる状態になる前にスクリプトを実行でき、より早い段階でDOMに対する処理を行うことが可能になります。

$(document).ready(function() {
  // DOMツリー構築直後に実行される（画像の読み込みは待たない）
});

// ショートハンドでも記述可能
$(function() {
  // 同じくDOM準備完了時に実行
});

クロスブラウザ対応の観点での違い

もう一つの大きな違いはブラウザ互換性です。window.onload を直接利用する方法は、古いブラウザとの相性やイベント登録の仕組みの面で問題があり、必ずしもすべての環境で同じように動作するとは限りません。

それに対して、jQueryの $(document).ready() を使えば、ブラウザごとの差異をライブラリ側が吸収してくれるため、主要なブラウザすべてで安定して動作します。

その他の注意点：複数ハンドラの登録

window.onload はプロパティへの代入によって登録するため、1ページにつき1つの関数しか設定できず、後から代入すると前の処理が上書きされてしまいます。一方、$(document).ready() は複数のコールバックを登録できるため、大規模な開発や複数スクリプトの併用においても柔軟に対応できます。

モダンな代替手段

近年ではjQueryを使わないプロジェクトも多いため、ネイティブJavaScriptで同様のことを実現する以下の方法も知っておくと便利です。

// DOM構築完了時に実行（onDocumentReady相当）
document.addEventListener('DOMContentLoaded', function() {
  // 処理
});

// 全リソース読み込み完了時に実行（window.onload相当）
window.addEventListener('load', function() {
  // 処理
});

なお、jQuery 3系以降では $(document).ready() の使用は非推奨とされ、$(function() { ... }) の形式が推奨されています。

まとめ：使い分けのポイント

• 画像サイズの取得など、全リソースが必要な処理 → window.onload
• DOM操作だけで完結する処理を素早く実行したい → onDocumentReady / DOMContentLoaded
• ブラウザ間の互換性や複数ハンドラの登録を重視する → jQueryの $(document).ready()

実行タイミングの違いを正しく理解し、用途に応じて適切に使い分けることで、ページのパフォーマンスとユーザー体験の両方を向上させることができます。