$(window).on('load')関数がIEだと動かない理由と対処法

問題点

jQueryにて以下のようなコードを書くと$(window).on('load')の中身が動作しない場合がある。

$(function(){
  $(window).on('load', function(){
  });
});

$(function()内に$(window).on('load')関数を記述すると$(window).on('load')の中身が動作しなくなってしまうのだ。
これは以下のように修正すると動くようになる。

$(function(){
});

$(window).on('load', function(){
});

関数の実行タイミングについて

なぜ上のような記述でエラーが出てしまうのか、それはJSの実行タイミングが関係してくる。
まず上に出てきた２つの関数の実行タイミングについておさらいする。

$(function()
HTML(DOM)の読み込みが終わったら関数の中の処理を実行する。
$(window).on('load')
画像などページ内にある全てのリソースの読み込みが終わったら関数の中の処理を実行する。

つまり実行される順番としては以下のようになる。

1. HTML(DOM)の読み込みが終わる
2. $(function()内の処理を実行
3. ページ内にある全てのリソースの読み込みが終わる
4. $(window).on('load')内の処理を実行

原因

前述より今回の不具合に関してはDOMの読み込みが終わり、$(function()内の処理が実行されたタイミングでは画像などの読み込みが終わっておらず、$(window).on('load')内の処理が実行されなかったことにより起こっていると考えられる。
これを解消するには最初に記述した通りに、それぞれの関数を分けて記述し、ちゃんと実行順序を示してあげることで解決する。

$(function(){
});

$(window).on('load', function(){
});