Javascript:如何在文件下载之前显示旋转器

javascript: how to show spinner until file downloads

本文关键字：显示 旋转 文件下载 Javascript      更新时间：2023-09-26

我有一个按钮下载excel文件。当用户单击按钮时，调用onClick函数窗口。位置url =

下载完成后，弹出文件保存对话框。

现在，我想显示一个旋转器，直到文件对话框出现。我该怎么做呢?

我试图在"window "之前创建一个旋转器。然后隐藏它，但是旋转器会立即消失，因为窗口。在文件下载之前，位置不会阻塞。

任何想法?

谢谢。

这将是一个只适用于Firefox浏览器的解决方案:

<script type="text/javascript">
//<![CDATA[
function download(url){
document.getElementById('spinner').style.display='';
frame = document.createElement("iframe");
frame.onload=function(){document.getElementById('spinner').style.display='none';}
frame.src=url;
document.body.appendChild(frame);
}
//]]>
</script>

在你的HTML中，设置一个旋转器并准备好:

<div id="spinner" style="background:url('/images/ico-loading.gif') #000 center no-repeat;opacity:.5;width:100%;height:100%;display:none;position:absolute" />

然后这样调用它:

<button type="button" onclick="download('/spreadsheet.xls');">DOWNLOAD SPREADSHEET</button>

按钮将使用我们想要下载的URL调用javascript函数。此时，我们使隐藏的旋转器DIV可见，并允许它占据整个屏幕(注意样式中的位置绝对)。创建IFRAME来压缩文件。文件下载后，它被交给用户，并触发. onload事件，隐藏旋转器DIV。所有这些都是用客户端javascript完成的!

仅使用客户端脚本是无法做到这一点的，因为当下载完成时没有事件。

您必须通过服务器上的代理页面下载文件，在URL中有唯一的标识，以便可以识别每次下载。然后，可以从脚本向服务器发送AJAX请求，以确定下载的状态。

此代码适用于jQuery，但也适用于javascript。有了这个，你根本不需要改变你的请求代码。

    创建一个包含动画的div元素(可以是另一个带有css-animation的div元素，也可以是img元素中的动画gif)，并赋予它id = "loadingicondiv"。例如:

    <div id="loadingicondiv">
    <div id="loadingicon" style="background:url('imgs/logo.png') center no-repeat;opacity:1.0;display:none;position:absolute;z-index: 9999;"></div></div>
  • 在css文件中设置div的样式，如下所示
    • 
    #loadingicondiv{
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0, 0.3);
        position: fixed;
        z-index: 9999;
    }
  • 在嵌入的js文件中输入
    • 
    function showAnimation(){
        $('#loadingicondiv').css({display : ''});
    };
    function hideAnimation(){
        $('#loadingicondiv').css({display : 'none'});
    };
    $(document).ajaxStart(showAnimation).ajaxStop(hideAnimation);

    最后一行使你的web应用程序发送的每个请求，在开始时执行函数"showAnimation"，并在请求完成时执行函数"hideAnimation"。

    如果您不使用jQuery，需要纯javascript，只需将$('#loadingicondiv')替换为以下代码

    document.getElementById('loadingicondiv').style.display = 'none'

    注意:如果你在你的网站上有一些频繁的更新，你不想显示动画，只是让动画的显示依赖于一个全局变量，你设置为false之前发送那些特殊的请求，你不希望动画被显示。当请求被完成时，不要忘记将其设置为true

    相关文章：