質問: お世話になっております。 作成しているWebページで画面読み込みに5秒ほどかかってしまうページがあり、 画面読み込みの際にローディング表示でGIFアニメーションを表示させることを考えております。 下記ソースで実装はできたのですが、IEの場合GIFアニメーションが殆ど止まってしまう状態です。 (ちょっとだけ動いたりはするので、完全に止まっているというわけではないようです) スムーズに動かなくてもよいので、解決方法があればご教示いただきたいです。 ちなみにページ読みこみに時間がかかっているのはJavaScriptではなく、ページの情報量が多いためです。 ``` ・HTML お待ちください ・javascript //全てのページ読み込みが完了したら実行 $(window).load(function () { loadEnd(); }); //画面ロード終了時にローディング画像を終了させメイン画面表示 function loadEnd(){ $("#loading").fadeOut(); $("#main").fadeIn(); } ```
回答: 動作確認などはしておりませんが、ネット検索しましたらこんなの見つけました。 どうやらIE11(それ未満のversionは不明)だとgifアニメをdisplay:noneとかで先読みさせておいて、submit時にそれを表示しようとするとgifアニメが停止して表示されるらしい。 それの対策がsubmit時にappend(prepend)する方法。 ``` $(window).load(function () { loadEnd(); setTimeout(function(){ $("#loading").prepend(''); },100); }); ``` submit時にie11とfirefoxでgifアニメーションが動かない&表示されない件 参考になりましたら幸いです