window.locationが返された後にGIFを読み込みません

Question

私は以下のコードのようにボタンをクリックしてサーバー上に作成したファイルをダウンロードしています。

$(document).ready(function() { 
    $('#reportBtn').on('click', function() { 
    $('#loadingScreen').removeClass('hidden'); 
    window.location = '/myApp/Home/GenerateReport'; 
    setTimeout(function() { 
     $('#loadingScreen').addClass('hidden'); 
    }, 20000); 
    }); 
}); 

それが正常に動作し、私は理想的にこれは本当にAJAX呼び出しで包み、そのように独自のGUIDを返し、ファイルを返すべきであることを知っている - があり、私はそのアプローチを使用するカントしかし、私はちょうど疑問に思ってファイルがダウンロードされたときに検出する必要がありますので、読み込み中のGIFを削除することをお勧めします。私は実際には正確ではないことを知っている20秒をハードコーディングしました。それは、レポートのデータ量が10秒でダウンロードされるか、ダウンロードに30秒かかることがあります。

より良いアプローチは、私は同じことをwindow.locationのために基本的なコールを維持使用することができますあります - これは、これに代えてreturn File(data, MediaTypeNames.Application.Octet, reportName);

Answer 1

のFileResultを返しMVCの呼び出しであることに注意して、あなたが表示するための別のアプローチを試すことができますページのロード時にロードスピナーすなわち：

<script type="text/javascript"> 
    $(function() { 
     $("#btnSubmit").click(function() { 
      var form = $("#frmCreate"); 
      form.validate(); 

      if (form.valid()) { 
       $("#loading").fadeIn(); 
       var opts = { 
        lines: 12, // The number of lines to draw 
        length: 7, // The length of each line 
        width: 4, // The line thickness 
        radius: 10, // The radius of the inner circle 
        color: '#000', // #rgb or #rrggbb 
        speed: 1, // Rounds per second 
        trail: 60, // Afterglow percentage 
        shadow: false, // Whether to render a shadow 
        hwaccel: false // Whether to use hardware acceleration 
       }; 
       var target = document.getElementById('loading'); 
       var spinner = new Spinner(opts).spin(target); 
      } 
     }); 
    }); 
</script> 


<div id="loading"> 
    <div id="loadingcontent"> 
     <p id="loadingspinner"> 
      Loading... 
     </p> 
    </div> 
</div> 


<style> 
    #loading { 
     display: none; 
     position: fixed; 
     left: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 
     background: rgba(255,255,255,0.8); 
     z-index: 1000; 
    } 

    #loadingcontent { 
     display: table; 
     position: fixed; 
     left: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 
    } 

    #loadingspinner { 
     display: table-cell; 
     vertical-align: middle; 
     width: 100%; 
     text-align: center; 
     font-size: larger; 
     padding-top: 80px; 
    } 
</style> 

同様にあなたもロードスピナーを表示するために、いくつかのプラグインを使用することができます。これが役に立ったら...