8

我正在使用 jQuery 下载一些需要一些时间来创建的文件，所以我展示了一个加载 gif 来告诉用户耐心等待。但问题是，加载 gif 会在一瞬间显示和隐藏。

下载完成并且用户在屏幕上弹出“保存文件”后，我有没有办法隐藏加载 gif？

HTML

<tr data-report_id="5">
    <td>
        <input type="button" id="donwload"></input>
        <img class="loading" src="/Images/Loading.gif"/>
        <iframe id="hiddenDownloader"></iframe>
    <td>
</tr>

JS

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}
iframe.src = url;
$(".loading").hide();

我最终使用的解决方案

<script>
$("#download").on("CLICK", function () {
    var button = $(this);
    button.siblings(".loading").show();

    var rowNumber = GetReportId();
    var url = GetUrl();
    button.after('<iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" />');
}

function loadComplete(rowNumber) {
    var row = $("tr[data-row_number=" + rowNumber + "]");
    row.find(".loading").hide();
}
</script>

<tr data-report_id="5">
    <td>
        <input type="button" id="download"></input>
        <img class="loading" src="/Images/Loading.gif" style="display:none;"/>
    <td>
</tr>

更新

我在 Chrome 中使用此方法时遇到问题，因此我更改了所有 jquery 代码以查找在下载完成处理时后端代码设置的 cookie。当 jquery 检测到 cookie 时，它​​会关闭加载 gif & whiteout。

检测浏览器何时接收文件下载

4

3 回答 3

3

让iframe onload事件调用您的代码：

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    iframe.onload = function() {
        $(".loading").hide();
    };
    document.body.appendChild(iframe);
}

iframe.src = url;
于 2013-06-10T11:05:55.270 回答
2 
iframe.src = url;

$(iframe).load(function() {
    $(".loading").hide();
});
于 2013-06-10T11:02:42.670 回答
0

我建议将文件生成与下载分开。

应该有一个调用哪个请求服务器来生成文件。服务器应以唯一 ID 响应以下载它。

另一个调用应该是简单的 get 调用，可以嵌入到 iframe/launch new window 中，直接下载生成的文件。

只需显示加载屏幕，直到您收到第一次呼叫的响应。

于 2017-01-24T07:33:36.423 回答