画面読み込み時にIEでGIFアニメーションが止まってしまう。

お世話になっております。

作成しているWebページで画面読み込みに5秒ほどかかってしまうページがあり、
画面読み込みの際にローディング表示でGIFアニメーションを表示させることを考えております。

下記ソースで実装はできたのですが、IEの場合GIFアニメーションが殆ど止まってしまう状態です。
（ちょっとだけ動いたりはするので、完全に止まっているというわけではないようです）

スムーズに動かなくてもよいので、解決方法があればご教示いただきたいです。
ちなみにページ読みこみに時間がかかっているのはJavaScriptではなく、ページの情報量が多いためです。

・HTML
    <div id="loading">
        <img src="images/bar-loader.gif">
        お待ちください
    </div>
	<div id="main" style="display:none;"></div>


・javascript
//全てのページ読み込みが完了したら実行
$(window).load(function () {
	loadEnd();
});

//画面ロード終了時にローディング画像を終了させメイン画面表示
function loadEnd(){
	$("#loading").fadeOut();
	$("#main").fadeIn();
}

行動規範の内容に同意します

回答1件

動作確認などはしておりませんが、ネット検索しましたらこんなの見つけました。

どうやらIE11(それ未満のversionは不明)だとgifアニメをdisplay:noneとかで先読みさせておいて、submit時にそれを表示しようとするとgifアニメが停止して表示されるらしい。

それの対策がsubmit時にappend(prepend)する方法。

JavaScript
1$(window).load(function () {
2    loadEnd();
3    setTimeout(function(){
4    $("#loading").prepend('<img src="images/bar-loader.gif">');
5 },100);
6});
7
8