【jQuery】ページロード時に処理を実行する完全ガイド｜$(function)・window.onload・DOMContentLoaded・実行タイミング比較まで

jQueryで「ページが読み込まれたら〇〇する」という処理を書く際、$(function() {})・$(document).ready()・window.onload など複数の書き方があります。この記事では各書き方の実行タイミングの違い・使い分け・よくある落とし穴まで解説します。

ページロード系メソッドの実行タイミング比較

通常は $(function() {}) を使います。画像のサイズ取得など画像読み込みを待つ必要がある場合は $(window).on("load", fn) を使います。

$(function() {}) の基本的な使い方

// 3つの書き方はすべて同じ意味
$(function () {
  // DOMが準備できたら実行
  console.log('DOM ready');
});

$(document).ready(function () {
  console.log('同じタイミング');
});

jQuery(function ($) {
  // $がjQueryと衝突するライブラリと組み合わせる際はこの形式
  console.log('$ を引数で受け取る形式');
});

画像・外部リソース読み込み後に実行する

// ページ全体のリソース（画像・CSS・フォント）が読み込まれてから実行
$(window).on('load', function () {
  // 画像の実際のサイズを取得する場合はここで
  var imgHeight = $('#hero-image').height();
  console.log('画像の高さ:', imgHeight);
});

// 特定の画像だけ読み込み完了を待つ
$(function () {
  $('#product-img').on('load', function () {
    console.log('商品画像の読み込み完了');
    var w = $(this).width();
    var h = $(this).height();
    console.log('サイズ:', w, 'x', h);
  });
});

動的に追加した要素へのイベントバインド

$(function(){}) は DOM読み込み時に存在する要素にしかイベントをバインドできません。後からAjaxや append() で追加した要素にはイベントデリゲーションを使います。

$(function () {
  // NG: 後から追加された .dynamic-btn にはイベントが効かない
  // $('.dynamic-btn').on('click', fn);

  // OK: document または親要素に委譲する
  $(document).on('click', '.dynamic-btn', function () {
    console.log('動的ボタンがクリックされました');
  });

  // 後からボタンを追加
  setTimeout(function () {
    $('body').append('<button class="dynamic-btn">動的ボタン</button>');
  }, 2000);
});

モダンJSとの比較

// バニラJS: DOMContentLoaded
document.addEventListener('DOMContentLoaded', function () {
  console.log('DOMContentLoaded');
});

// バニラJS: 全リソース読み込み後
window.addEventListener('load', function () {
  console.log('全リソース読み込み完了');
});

// 既にDOMが読み込まれている場合（scriptをbody末尾に置いた場合など）
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init(); // 既に読み込み済みなら即実行
}

function init() {
  console.log('初期化処理');
}

まとめ

ページロード時の処理実行に関するポイントをまとめます。

• $(function() {}) = DOMContentLoaded（HTML解析完了・画像を待たない）
• $(window).on("load", fn) = 画像・CSS等全リソース読み込み後
• 複数の $(function) は全て実行される
• 動的要素へのイベント: イベントデリゲーションを使う
• 新規プロジェクト: document.addEventListener("DOMContentLoaded", fn) が標準

関連記事: ページ離脱時にアラートを表示する完全ガイド / POSTリクエストを送信する方法

よくある質問（FAQ）