あるHPでjQueryを使ってアニメーションを動かしていた。正確に言うと、アニメーションのトリガーとして、特定のタグに属性を追加するというような処理をしていた。

が、どうもChromeやSafariではちゃんと動くのに、Firefoxでは動いたり動かなかったりするという症状が出ていた。

調べてみるとjQueryの書き方とバージョンの問題のようだった。
症状が出ていた処理は、以下のように$(function(){})（ready関数）の中に、$(window).on()（load関数）が書かれていた。

$(function(){
  // DOMツリー構築完了後の処理
  $(window).on('load', function(){
    // 画像・動画などの関連データが読み込まれた後の処理
  });
});

確かに処理の順番を理解していれば、この書き方がおかしいことに気づく。

readyは画像などが表示されるより前に実行され、loadは画像などが表示された後に実行されます。

jQuery2.0だと、上の書き方でも正常に動いてくれたが、jQuery3.0以降は、$(window).on()の処理は$(function(){})の外に書かなければいけないとのこと。

$(function(){
  // DOMツリー構築完了後の処理
});

$(window).on('load', function(){
  // 画像・動画などの関連データが読み込まれた後の処理
});

参考