$(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！

先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。

どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。
コンソールを見てもエラーログは出ていない。
これまで通り記述しているのにconsole.log()さえ動かない…。

という内容でした。非常に焦ったのでその時の原因と対処法をメモしておきます。

結論から言うと、使用するjQueryのバージョンを3に変えたことが原因でした。

jQuery3からはdocument-readyが常に非同期になっている

専門的な細かいことまでは分かりませんが、 jQuery3での変更点を分かりやすくまとめてくれているQiitaのページを見てみると、

document-ready処理が追加された時点で既にreadyでも同期的に処理を行わず、あくまで非同期で処理を行うようになります。
jQuery 3.0はPromises/A+標準に従うようにしているからです。
documentがreadyかどうかにかかわらず、処理の順序の一貫性を保証できます。

とのことです。どういうことかというと、 ready関数と load関数の処理の順番が前まであやふや（？）だったのが、しっかりと分けて処理されるようになったみたい。（表現があっているか分かりません。私のイメージです。）

ready関数ってのは下のようなやつですね。

$(function(){
  //htmlロード時の処理
});

基本的に、今までは関数の宣言以外、全部この ready関数の中に処理を書いていました。動いているから別にいいかと習慣になっていたのですが、これがダメポイントでした。

具体的にどういう記述が問題なのかというと、

$(function(){
  //htmlロード時の処理
  $(window).on('load', function(){
    //ページ全体が読み込まれた時の処理
  });
});

上記のように、 $(function(){ }); の中で load関数を実行させている場合、痛い目に合います。笑
もともとこの記述はアウトなのかもしれないのですが、これで動いていたので私はいつもこうしていました。変数の管理が楽だったんです…。

しかし！ jQuery3以降では完全アウトになっているようです。

ですので、これらの記述を次のように分けて書いてあげるだけで、今回の問題は解決しました。

これで解決！

$(function(){
  //htmlロード時の処理
});
$(window).on('load', function(){
  //ページ全体が読み込まれた時の処理
});

新しいバージョンを使用する時はしっかり変更点などの情報を集めないと痛い目見ますね。笑

もし同じような現象に悩んでいる人がいましたら参考になれば幸いです。