IEでローディングのGIFアニメーションが動かない

前提・実現したいこと

IEでHTML読み込み時に走る処理が長いため、ローディングのGIFを表示したいのですが
GIFのアニメーションが動かず、静止画のまま表示がされてしまいます。
画面表示までの流れとしては
対象の画面に遷移⇒ローディング画面表示⇒Javascriptにての処理⇒ローディング画面非表示
といった流れを想定しています。

※GoogleChromeではGIFアニメーションが動いていることを確認しました。

試したこと①（HTMLにGIFアニメーションベタ書き）

一番最初に試したこと
結果：ローディングのGIFは表示されましたがアニメーションが動きませんでした。

HTML
1<body>
2  <div id='loading'>
3　　<!--ここにローディングの画像を表示させます-->
4　  <img src="loading.gif">
5  </div>
6<body>
7
8<script>
9$(document).ready( function(){
10　//時間のかかる処理を行う
11　hogehoge();
12 // ローディングのdivを消す
13　$("#loading").remove();
14　
15});
16 
17</script>

試したこと②（Javascript内でGIFを表示するHTMLを作成する）

結果：ローディングGIF自体が表示されませんでした。

HTML
1<body>
2  <div id='loading'>
3  </div>
4<body>
5
6<script>
7$(document).ready( function(){
8  // ローディングのdivに画像を表示する場所を追加する。
9  $("#loading").html('<img src="loading.gif">')
10
11　//時間のかかる処理を行う
12　hogehoge();
13
14 // ローディングのdivを消す
15　$("#loading").remove();
16});
17 
18</script>

試したこと③（時間のかかる処理をsetTimeoutで非同期にする）

結果：時間のかかる処理を実行するまで（1秒後）はローディングGIFのアニメーションが動きました

HTML
1<body>
2  <div id='loading'>
3  </div>
4<body>
5
6<script>
7$(document).ready( function(){
8  // ローディングのdivに画像を表示する場所を追加する。
9  $("#loading").html('<img src="loading.gif">')
10
11　//時間のかかる処理を行う(1秒後に実行する)
12  //ローディングのdivを消す処理もこの中に含めました
13　setTimeout(hogehoge(),1000);
14
15});
16</script>

結果を見ての考察

IEの仕様としてfunction実行時に描画を一時停止、終了時に一気に描画をしているのではないか

　（GoogleChromeはコード単位で随時描画しているからローディングGIFのアニメーションが動くのでは？）

備考(バージョン情報等)

IEのバージョンは『11』です。
クライアントの要望で、ブラウザはIE11固定です。
ユーザに処理時間を意識させないための処置なので、ローディングのGIFでなくともよいです。
async/Await等はIE対応していないため使ってません（そもそも今回の問題はブラウザの仕様だと思っているからです）

　async/Awaitなどの非同期処理を使えば直るということであればBabelの使ってコンパイルすることも視野に入れていきたいです

JQuery3.3.1を使用しています

参考にさせていただいたサイト

ページ読み込み中にローディング画面を表示する
 jQueryを使って簡単にできるローディング画面を作ってみた

x_x

2018/11/16 07:21

参考サイトは$(window).load()で書いてあると思いますが、なぜ$(document).ready()に変更したのでしょうか？

toshi_n

2018/11/16 09:15 編集

ご指摘いただきありがとうございます。 $(window).load()を使っていない理由についてですが、 JQueryのバージョンが変わったことによりloadが使えなくなってしまったことと Javascript内にてHTMLの追加を行っているためreadyの方が良いのではないかと判断しました。 loadの代替となる$(window).on("load",function(){を使用しましたが、結果は①と同様の結果となりました。備考にJQueryのバージョンを追記致しました。 Javascriptはあまり触ってこなかったため至らない点が多々あるかと思いますが、また何かありましたらご指摘のほうをお願いいたします。

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

回答4件

過去質ですがこちらは参考になりませんか？

投稿2018/11/16 05:58

退会済みユーザー

総合スコア0

toshi_n

2018/11/16 09:26

ご回答ありがとうございます。過去の質問、参考サイトを拝見させていただき、ローディングを表示する処理にsetTimeoutを付けてみましたが、結果は変わらずでした。おそらく今回の問題としては、『画像の読み込み』や『サーバーへの送信』ではなく純粋に『Javascript内の処理』に時間がかかってしまっていることが問題となっているのかと思います。

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

###質問者さん？

Jqueryを使うのはNGですか？
https://webllica.com/jquery-now-loading/

質問者さんのスキルを想像するとここまで長い説明はいらない気もしますが参考にされてください。

###私の意見

クライアント様はなぜIE11準拠をrequireにしたのでしょうか。

PC前提サイトならともかく、モバイルもならAndroid標準ブラウザやSafari for IOSなどを想定した方が望ましいような？

そのあたりは質問者さんがきちんと誘導したりはしないのですか？

さらにIE11のバグで表示されないページも多数あるようで、問題視されているようです（おそらくごぞんじなのでしょうが）。

投稿2018/11/20 22:49

phpsyoshinsya

総合スコア156

toshi_n

2018/11/21 02:03

ご回答いただきありがとうございます・JQuery(Ajax)の使用について　JQueryを使うのはOKのため、Ajaxを使用してみましたが、結果はサーバー通信中にローディング　となりますが、通信終了後は止まってしまいました。　Markdown記法が使えない箇所にソースをすべて書くわけにはいかないのでAjax処理の概要を　以下に抜粋いたしますと　サーバーURL：”5秒ほどかかるサーバー処理” 　done(通信成功時)：hogehoge();　// 時間のかかるJavascript処理　fail(通信失敗時)：失敗したことを表示するコンソールログ　always(処理終了時)：$("#loading").remove();　//ローディングのdivを消す処理　といった形になっています。　この時、サーバー処理中（約5秒間）はローディングのGIFが動いていますが　done(通信成功時)の処理に入ったタイミングでGIFが停止してしまいます。　おそらく、『結果を見ての考察』の通り、通信成功時の処理時に描画が停止しているのではないかと思います。・クライアントについて　今回は１つ企業を対象としたシステムのリプレイス（Java⇒C＃）となるため、　対象の企業でしかアクセスができず、企業のPCで使うことを前提にしています。　※IP-VPNと呼ばれるものかと思います。　ブラウザでIEを指定されている理由としては、現行のシステムではIEのブラウザを使用しているため　それをできるだけ変えたくないものかと思います。　私は下っ端プログラマーのためクライアントと直接対話する機会がないため、プロジェクトリーダーに　IEからChromeに変えていただく様に具申していますが、クライアントの理解が得られない限りは　変わることはないかと思われます

phpsyoshinsya

2018/11/21 07:35

あまり役立たなかった回答に丁寧な解説感謝します。お時間を裂いていただき申し訳ないです。

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

自己解決

自己解決いたしましたのでご報告いたします。
ソースは下記に記載しますが、大まかな流れは以下の通りです。

１．$.whenの中でローディングアイコンを表示する処理＆時間のかかる処理を実行
２．$.whenの中の処理が完了しDoneに行った段階でローディングアイコンを消す処理を実行。
３．終わり

whenやPromiseをあまり使う機会がなかったため本当にあっているのか微妙ですが、これにて一応
対象の画面に遷移⇒ローディング画面表示⇒Javascriptにての処理⇒ローディング画面非表示
の一連の流れができましたので、解決済みといたします。

ご協力いただいたみなさま、ありがとうございました。

JavaScript
1var isloading = false
2
3/**ローディングアイコンを表示します。 */
4function startLoading() {
5    isloading = true
6
7    // ローディングのアイコンをBodyに設定
8    const HTMLElement = '<div class="loading" style="z-index: 9999">' +
9        '<i class="fa fa-spinner fa-spin loading-icon"></i>' +
10        '</div>';
11    $('body').append(HTMLElement);
12
13　　//0.5秒のインターバルでローディングが完了していないか確認する
14    var interval = setInterval(function () {
15
16　　　　 //ローディングのフラグがFalseになっていた場合
17        if (!isloading) {
18　　　　　　 // ローディングアイコンをBodyから消す
19            $('.loading').remove();
20
21            // 以降のインターバルは不要のためclear
22            clearInterval(interval);
23        }
24    }, 500);
25}
26
27/**ローディングアイコンを非表示にします。 */
28function endLoading() {
29    isloading = false
30}
31
32/**
33 * ローディングを出したい時に使用する一番最初の処理
34 * @param {Function} f
35 */
36function displayLoading(f) {
37    $.when(
38
39        //この処理が完了するまでdoneにはいきません
40        execute(f)
41    ).done(function () {
42　　　　// 処理が終了したのでローディングを非表示にする（フラグをFalse）にする処理を実行
43        endLoading()
44    })
45}
46
47/**
48 *　ローディングを開始し、引数の関数を実行する処理
49 * @param {Function} f
50 */
51function execute(f) {
52    var d = $.Deferred();
53
54　　//ここでローディングアイコンを表示する処理をスタート
55    startLoading();
56
57    setTimeout(function () {
58        f();
59
60　　　　//Promiseの状態を完了にする
61        d.resolve()
62    }, 0);
63
64　　　
65    return d.promise();
66}