【jQuery3系／WordPress5.6以降】ready、loadなどのjQueryの発火のタイミングまとめ

WordPress5.6以降、WordPressに同梱されるjQueryのバージョンが上がったため、jQueryの発火タイミングが微妙に変わりました。

参考：jQuery 3.xを使ってみる

jQuery3系だと、それぞれどういう順で呼び出されるか

実際にどのタイミングで読みだされるかを調べてみたところこんな感じ。

環境によっては画像がもう少し早く読みこまれることもあるような気がしましたが、おおむねこんな感じですね

1. head内／ready外の記述(deferなし)
2. ＜HTMLの読み込み＞
3. body最下部／ready外の記述
4. head内／ready外の記述(deferあり)
5. head内／ready内の記述(deferなし)
6. body最下部／ready内の記述
7. head内ready内の記述(deferあり)
8. ＜画像の読み込み＞
9. head内／load内の記述(deferなし)
10. body最下部／load内の記述
11. head内load内の記述(deferあり)

jQuery3系では、基本的にreadyの処理は不要

jQuery3系を使う場合、とくにscriptタグをbody最下部に書く場合、下記の処理は無くても大丈夫です。
head内で使うときは、こちらの記述が無いとHTML読み込み前に発火してしまうかもしれないので付けた方が良いかも。

$(function() {
  //実行処理
});

また下記の書き方は非推奨なのでやめましょう

$(document).ready(function() {
  //実行処理
});

WordPressでhead内にscriptを呼び出す場合はちょっと工夫する

WordPressでwp_enqueue_scriptを使ってスクリプトを呼ぶときは、デフォルトだとhead内に入ります。
いきなり$(function() {})なしで実行処理を書くと、HTMLの読み込み前に発火してしまうので動きません。

下記のいずれかをやっておくといいでしょう。

• headで読み込むJavaScriptにdeferを入れる
• body最下部でJavaScriptを読むように書き換える

参考：WordPress wp_enqueue_scriptで追加するscriptタグにdefer/asyncを付加する方法

参考：WordPressのwp_enqueue_scriptで呼びだすJavaScriptファイルをフッター(wp_footer()内)に呼びだす方法

画像の読み込み完了を待つときはload

画像の読み込み完了まで待つ場合は、下記のような形でloadを待ちます。

$(window).on('load', function() {
     //実行処理 
});

ちなみにこれを、$(function() {}) の内側に書くと動きません。
jQuery1系の時は動いていたものですので要注意です。

最新のWordPressを使うときは、下記のようなコードは修正しましょうね。

↓↓動かないコード

$(function() {
     $(window).on('load', function() {
          //実行処理 
     });
});