submit時にie11とfirefoxでgifアニメーションが動かない＆表示されない件

ページ読み込み中にローディング画面を表示する
この辺のサイトを真似てgifアニメーションでローディング表示をしようと思ったところ、IE11でgifアニメが動かない現象が発生。

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

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

function clickSubmit(btn) {
 $("#loader").prepend('<img src="/img/loader.gif">');
 btn.form.submit();
}

そしたら今度はfirefoxでgifが表示されなくなってしまった！！
どうやらfirefoxはsubmitの前にappendすると画像が表示されなくなるらしい。。
そのためsetTimeoutでappendするタイミングをずらしてやる。

function clickSubmit(btn) {
 setTimeout(function(){
  $("#loader").prepend('<img src="/img/loader.gif">');
 },100);
 btn.form.submit();
}

これでchrome、firefox、ie11全てでsubmit時にgifアニメを表示できるようになった。
対応する前から嫌な予感はしていたけど予想通りブラウザ依存が激しくて嫌になった。

2015/3/20追記
ie7,ie8,ie9で確認済み。なおie7と8は透過はされない。やっぱりIETesterが糞すぎる。何のエミュレーションにもなっていないので即刻削除。やっぱりバーチャルPCにXP入れてその中でie7,ie8を確認するのがベスト。