javascript：显示长时间加载下载的动画

我有一个页面，上面有一个下载按钮。当用户按下下载按钮（这只是一个链接）时，将生成一个excel文件并作为下载返回。生成此文件可能需要一分钟的时间

目前，用户只看到正在发生的事情，因为他的浏览器正在加载。我想让大家更清楚地看到正在发生的事情。为此，我有一个div来显示微调器：

#内容加载{
位置：固定；
z指数：100000；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.装货{
位置：绝对位置；
最高：50%；
左：50%；
显示：内联块；
边框宽度：30px；
边界半径：20%；
-webkit动画：旋转3s线性无限；
-moz动画：旋转3s线性无限；
-o动画：旋转3s线性无限；
动画：旋转3s线性无限；
}
.style-3{
边框样式：双边框；
边框颜色：#1C90F3#ff0000；
}
@关键帧旋转{
100% {
变换：旋转（359度）；
}
}

---

我通常设置加载屏幕的方式适用于

在主JS文件中，我有：

$(document).ready(function () {
//show and hide loading screen on each AJAX call
$.ajaxSetup({
    'beforeSend': function () {
        $('#contentLoading').show();
    },
    'complete': function () {
        $('#contentLoading').hide();
    },

});
....
});//end of $(document).ready

这将适用于每个AJAX调用，您可以设置它们，而无需注意显示或隐藏加载屏幕

---

注意。

您好，您可以使用下面的代码，但您应该从AJAX结果中获得文件链接，或者如果您已经知道，那么您可以直接提供给您

$('#exportExcel').click(function () {
$("#contentLoading").show()
$.ajax({
  url: 'download_excel_excel.php',
  type: 'POST',
  success: function (result) {
    $("#contentLoading").hide();
    getFile(result['fileLink']);
  }
})
}); 

这里是getFile函数，它基本上是创建隐藏的iframe和set文件

function getFile(fileUrl) {
var iframe = null;
if($('#downloadFrame').length > 0){
    iframe = $('#downloadFrame');
    iframe.attr('src',fileUrl)
}else {
    iframe = $("<iframe/>",{
        id: 'downloadFrame',
        src: fileUrl,
        style: 'visibility:hidden;display:none'
    });
    $('body').append(iframe);
}
}

函数getFile（fileUrl）{
var-iframe=null；
如果（$（'#downloadFrame'）。长度>0）{
iframe=$（“#下载框架”）；
iframe.attr（'src'，fileUrl）
}否则{
iframe=$（“”{
id:'下载框架'，
src:fileUrl，
样式：“可见性：隐藏；显示：无”
});
$（'body'）.append（iframe）；
}
}

这是一个常见问题，您无法确定用户何时下载其文件。您可以尝试在服务器上设置一些函数，以便在完成文件生成后，可以调用此函数向客户端发送一些

JSON

对象，通知客户端文件已成功下载。

$（'#exportExcel'）。单击（函数（）{$（“#contentload”）.show（）应足以显示微调器。要隐藏它就有点棘手了。您可能希望更改方法并使用GET请求来生成适当的内容以及内容处置头。然后您确实会发出GET请求并执行第一个代码段中的操作。问题是OP没有任何AJAX调用，因此这将永远不会显示/隐藏任何内容。dfsq，您是对的。很抱歉，我没有正确理解这个问题：（这将起作用，对吧。只需要修改服务器端来生成文件。