jQuery呼び出しの３つのタイミング【インライン、$(document).load、$(window).ready】

jQueryを実行するタイミングは大きく分けて３つに分けられます。

この３つのタイミングを知らないと関数を実行しても思うように要素を操作できないことがあるのでこのタイミングを非常に重要です。

そこで、jQuery関数呼び出しの３つのタイミングについて解説します。

jQuery呼び出し３つのタイミング

jQueryで関数を呼び出すタイミングは実行の速い順に次の３つに分けられます。

1. インライン実行
2. DOMツリー読み込み後
3. ウィンドウ内の全てを読み込んだ後

この３つについて順に解説します。

インライン

このタイミングで呼ばれるjQuery関数はブラウザが一番上から文章を読んでいくときにすぐに実行されます。

例えば次のようなHTML文章があるとします。

<div id="box1"></div>

<script type="text/javascript">
$("#box1").text("書き換えました");
$("#box2").text("書き換えました");
</script>

<div id="box2"></div>

このHTMLがブラウザに読み込まれて表示されたとき、box1というidが割り振られたdiv要素には「書き換えました」というテキストが表示されます。

しかしその後のbox2というidを持つdiv要素には何も表示されません。

これはjQuery関数をHTML文章の読み込みと同時に行っているからです。「box1」はjQuery関数の実行より前に読み込まれますが、「box2」はスクリプト実行後に読まれるのでjQuery側で書き換えはできないという事です。

インラインのタイミングで要素の書き換えやCSSの書き換え、イベントの実行は行わない方が良いです。

DOMツリー読み込み後

DOMツリーとはHTML文章を構造化してプログラムなどから扱いやすくしたデータのことです。

このDOMツリーの読み込み後にjQueryを実行するには次のような処理を書きます。

$(document).ready(function(){
  /** DOMツリー読み込み後の処理 */
});

次の２つのように省略した書き方も可能です。

$().ready(function(){
  /** DOMツリー読み込み後の処理 */
});

$(function(){
  /** DOMツリー読み込み後の処理 */
})

このタイミングでjQuery関数を実行すると確実に要素の書き換えを行うことができます。

全てのデータ読み込み後

ブラウザ側で画像やCSSなど全てが読み込まれたタイミングでjQuery関数を実行するには次のように書きます。

$(window).load(function(){
  /** 全データ読み込み後の処理 */
});

例えば「$(document).load」ではDOMツリー読み込み後なので画像の大きさを取得するスクリプトは書けませんが、「$(window).load」なら画像読み込み後なので大きさを取得するスクリプトが書けます。

またjQueryでcss関数を使う場合もここに書いた方が安全です。

まとめ

以上、jQueryの３つの読み込みタイミングについて解説しました。

適切な処理をするには適切なタイミングでjQuery関数を呼び出す必要があります。