【jQuery】実行タイミングの違い

スポンサーリンク

jQuery(JavaScript)が実行されるタイミングには以下の3種類があります。

パターン1.$(window).load(function() { });
パターン2.$(document).ready(function() { });
パターン3.インライン

サンプルHTML

各パターンのタイミングを確認するために、以下のサンプルHTMLを作成しましたのでブラウザで実行して確認してみます。

アラートが表示される順番が実行タイミングとなりますので、パターン3-1 → パターン3-2 → パターン2 → パターン1 となっている事がよくわかるかと思います。

インラインのイベント

HTMLは一番上から読み込まれてDOMが構築されていきますので、インラインで直接記述している箇所はその順番で実行されていきます。

パターン3-1に関してはブラウザの表示が「実行されていません。」のままになっていますが、正確には実行されています。これは 3-1 を実行するタイミングで<body>内の読み込みが完了しておらず、id="inline1"の要素が取得できなかったためです。一方でパターン3-2<body>タグの最後に記述していますので、文字の変更がされているのがわかります。アラートが表示されるタイミングでブラウザの表示がどうなっているか見ると分り易いでしょう。

ということは<body></body>の閉じタグ直前に記述すれば$(document).ready〜とほぼ同じタイミングになります。

$(document).ready〜のイベント

パターン2に関してはDOMの読み込み完了後に呼び出されます。HTMLを最後まで読み込んだら呼び出されると捉えてもいいです。この読み込みには画像等は含まれませんので、DOM解析が完了した時点で実行されます。

$(window).load〜のイベント

パターン1に関してはWindow内の全て(画像等も含めて)の読み込みが完了した時に呼び出されます。要は一番最後という事です。

まとめ

これらを踏まえて適切なタイミングに処理を実行する必要があります。私も最初よく知らずに$(document).readyしか使ってなかったのですが$(window).loadのタイミングで実行しなければいけない場合もありますので意識しておいた方がいいでしょう。

ちなみに$(document).readyは以下のように省略して記述する事も可能です。基本的に使うのは$(function()〜ですね。

$(document).ready(function() {
    $('html')〜   
});

$().ready(function() {
    $('html')〜
});

$(function() {
    $('html')〜
});