ある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(){
// 画像・動画などの関連データが読み込まれた後の処理
});