Javascript 使用jQuery下载大型文件&；iFrame-需要一个文件就绪事件，以便隐藏加载的gif

我使用jQuery下载了一些需要花费一些时间才能创建的文件，所以我显示了一个加载的gif，告诉用户要耐心。但问题是，加载的gif当前显示和隐藏在一瞬间

下载完成并且用户在屏幕上弹出保存文件后，是否有办法隐藏加载的gif

HTML

---

我最终使用的解决方案

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

$（“#下载”）。在（“单击”上，函数（）{
var按钮=$（此按钮）；
button.slides（“.loading”）.show（）；
var rowNumber=GetReportId（）；
var url=GetUrl（）；
按钮后（“”）；
}
函数loadComplete（行数）{
var row=$（“tr[数据行_编号=“+rowNumber+”]）；
row.find（“.loading”）.hide（）；
}

更新

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

---

让

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;

---

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

应该有一个请求服务器生成文件的调用。服务器应使用唯一id进行响应以下载文件

另一个调用应该是简单的get调用，它可以嵌入iframe/launchnew窗口，直接下载生成的文件

---

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

此代码可以工作，但不适用于文本文件（.txt）。请共享代码以下载所有用户的文本文件browsers@ManojRana最好问一个新问题。

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

iframe.src = url;

$(iframe).load(function() {
    $(".loading").hide();
});

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;