在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的基本调用保持不变-请注意，这是一个MVC调用，它返回return File(data, MediaTypeNames.Application.Octet, reportName);

Answer 1

代替此，您可以尝试另一种显示加载微调器的方法，即在页面加载期间：

<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>

同样，您也可以使用一些插件来显示加载微调器。 希望这可以帮助...