こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

jQueryでサイトのアニメーションを実装している時、正しくアニメーションが動くときと動かない時が起こっていることに気が付きました。このようにアニメーションが動作しない時、コンソールのエラーを確認すれば原因が分かりますが、この時はエラーが出ていませんでした。

中の処理がいけないのかと思い、処理を全て消して以下の記述のみにしましたが、それすら動作するときと全く動作しない時がありました。

$(window).on('load',function(){
  console.log("テスト");
});

基本的にこのように動作しない場合、コンソールエラーを手掛かりに原因を探るのですが、エラーすら出力されない場合、凄く焦りますよね。

今回の記事ではこのように$(window).on(‘load’)が動作しない場合の解決方法を解説したいと思います。

動作しなかった記述

まず動作する時としない時があった記述を見てみましょう。

$(function(){
  $(window).on('load',function(){
    console.log("テスト");
  });
});

たったこれだけの記述で動作する時と動作しない時がある+コンソールエラーが一切無しという現象が起こりました。これだけの記述なので打ち間違いや文法間違いもない、あったとしてもすぐに気が付くと思います。

動作する記述

早速ですが正しく動作する記述を見てみましょう。

$(function(){

});
$(window).on('load',function(){
  console.log("テスト");
});

処理の記述を以下の囲いの外に出しただけです。

$(function(){

});

たったこれだけです。この$(function(){ });はjQueryを使用する場合、お決まりの記述として書く人も多いのではないでしょうか。

ただし、$(function(){ });の中に$(window).on(‘load’)を記述して動かないのはjQuery3系を使用しているときだけです。jQuery2系を使用している場合は特に気にしなくても動作してくれます。

ついつい癖で$(function(){ });で囲ってしまいがちですが、jQueryのバージョンによっては思わぬ不具合を起こしてしまうので正しい記述をしていきたいですね。