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

Question

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

Detect when browser receives file download

Answer 1

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