我正在使用jQuery下载一些需要一些时间来创建的文件,所以我展示了一个加载gif来告诉用户耐心等待.但问题是,加载gif当前显示并隐藏在瞬间.
有没有办法让我在下载完成后隐藏加载gif并且用户在屏幕上显示Save File弹出窗口？
<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&白化.
解决方法
让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;
