【WordPress対応】jQueryを読み込まないときは実行順序が違うかも？

このような内容でお困りではないですか？ この記事では、jQueryを使い始めたばかりの頃に陥るjQueryの読み込み順序について解説したいと思います。 この記事を読むことで、jQueryとHTMLの読み込み順序が理解できるのでワンランク上のコーディングが出来るようになります。

jQueryを読み込まないときは実行順序が違うかも

何でもかんでも

jQuery(document).ready(function(){
  //処理
});

初めたばかりの頃はどの関数から実行されるのかを意識せずに書き進めていることが結構あります。 読み込めないから諦めることもしばしばあるかもしれませんね。 この記事でそのようなことが無いようにしっかりと実行順序について確認してみて下さい。

問題

以下のjQueryの書き方はそれぞれどのような順番で実行されるでしょうか？

jQuery(function(){
  //処理
});

jQuery(function(){
  //処理
});

jQuery(document).ready(function(){
  //処理
});

正解は全部同じです。 次にこちらはどうでしょうか？

jQuery(window).load(function(){
  //処理
});

正解はHPが読み込まれた後に実行されます。

ページの読み込み順序

WordPressでは以下の順番でHPが読み込まれてゆきます。

結論

画像等の大きさを指定するときはコンテンツのすべてが読み込み終わった後に実行される

jQuery(window).load(function(){
  //処理
});

こちらを利用して処理を書くとうまくいきます。