★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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

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

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

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

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

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

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

この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ツリー読み込み後の処理 */
});

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

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

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

全てのデータ読み込み後

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

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

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

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

まとめ

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

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

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press