gifのぐるぐるを表示したいのですが、表示されません。

Question

あるCSVファイルを読み込んでテーブル表示する際、QRコードをjQueryで作成するため読み込みに時間がかかってしまいます。なのでよくあるgifのぐるぐるを表示したいのですが、表示されません。
デベロッパーツールで確認すると、ステータスがpendingのまま処理が進み、処理が終わるとfinishになりますがそれと同時に非表示になってしまいます。
テキストは表示されます。
再度別名のCSVをアップロードするとgifは読み込まれます。

試したこと
gifを2KBのもので試す。
CSSをHTMLに直書きする
「Disable cache」を「オン」

エラー？
gifに対して以下の様なエラー
Provisional headers are shown
読み込みタイミングがおかしい？

参考URL
https://webllica.com/jquery-now-loading/

<form enctype="multipart/form-data" method="post">
    <input type="file" name="userfile" accept=".csv">
</form>
<div id="csv"></div>

$('input[type=file]').change(function () {
     var file = $(this).prop('files')[0];
     var reader = new FileReader();

     dispLoading("処理中です<br>少々お待ちください...");
　　  reader.onload = function () {
　　    removeLoading();
            //読み込み処理
　　}
}

function dispLoading(msg){
    // 画面表示メッセージ
    var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
    // ローディング画像が表示されていない場合のみ出力
    if($("#loading").length == 0){
        $("body").append("<div id='loading'>" + dispMsg + "</div>");
    }
}

/* ------------------------------
Loading イメージ削除関数
------------------------------ */
function removeLoading(){
    $("#loading").remove();
}

#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("8a33b035.gif") center center no-repeat;
}

Answer 1

#loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
  display: none;
}

<form enctype="multipart/form-data" method="post">
        <input type="file" name="userfile" accept=".csv" onchange="upload();">
</form>

function upload() {
    const loading = document.getElementById('loading');
    loading.style.display = "table";
}

まずCSSで不可視にする
onchangeでファイルアップロードを検知
それに合わせて表示する

という方法で解決

Answer 2

[LoadingイメージのURL]は、そのままCSSに書くのではなく、実際のGIF画像のファイル名を(CSSと別のフォルダーに画像を置いてあるのならば、CSSファイルのあるフォルダーから見た相対パス付で)置き換えて書く場所です。

「Provisional headers are shown」が出ているってことは、GIF画像ではなく、読み込もうとしているCSVファイルがキャッシュを利用して処理されたので、画像を表示することなく処理が終了してしまったのでは。
キャッシュを無効にして試してみてください

Comments

[rikutennis]

CSSと同じ階層にgifをおいてそのパスを書いています。
なので、再度CSVをアップロードし直すと、gifは表示されます。

[Daregada]

> CSSと同じ階層にgifをおいてそのパスを書いています。
質問文を修正してCSSファイルを「実際に使っている内容」で書いてください。
パスワードなど、伏せるべきところは伏せて書かなければいけませんが、ここでファイル名を伏せても何の利点もありません。

> 再度CSVをアップロードし直すと、gifは表示されます。
そういう情報も、「質問文を修正」して、回答者にわかるように提示してください。

[rikutennis]

修正いたしました。

[rikutennis]

キャッシュを無効にしましたが、やはり表示されません。

[Daregada]

ああ、時間がかかっているのは「CSVファイルの読み込みに」ではないのでは。読み込みが終わった後で、QRコードを作成する処理に時間がかかっているんですよね? でしたら、ぐるぐるマークを消す処理は、onloadの先頭に書いてはダメでしょうに。

[rikutennis]

文字は表示されるので、場所は関係ないと考えています。

[Daregada]

ええと、提示されたJavaScriptは実際に使っているものではないですよね?
たとえば、「$('input[type=file]').change(」の閉じカッコはどこに書いてあるんだ、とか。
「reader.readAsDataURL(file);」はどこに書いてあるんだ、とか。