使用 jQuery 和 iFrame 下载大文件 - 需要文件就绪事件，以便我可以隐藏加载 gif

我正在使用 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>

UPDATE

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

检测浏览器何时接收文件下载 https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download

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