javascript - Asp.net/JQuery 在下载前显示/隐藏动画 gif

Question

我创建了一个页面，该页面在开始服务器端操作时显示动画。 div 看起来像这样:

 <div id="loading" style="display: none;">
        <img id="loading-image" 
         src="../../Images/waiting-animation-extra.GIF" alt="Loading..." />
    </div>

我的客户端脚本如下所示

   $(document).ready(function () {
        $("#btnExportToExcel").click(function () {               
            $('#loading').show();                
        });
    });

我的 CSS 看起来像这样:

 <style type="text/css">
    #loading {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 40%;
        left: 45%;
        z-index: 100;
    }
</style>

当我单击我的 asp 按钮时，动画开始并准备好报告。问题是我想在下载报告时隐藏动画。但是，下载完成后，.gif 就会卡住。我已经尝试过ScriptManager.RegisterStartupScript(this, GetType(), "DoHide", "$("#loading").hide();", true);在后面的代码中的各个点，但它似乎受此代码的影响:

 DateTime time = DateTime.Now;

    Response.Clear();
    Response.AddHeader("content-disposition" 
          ,string.Format("attachment;filename=Equipement Man Game Played {0}.xls"
         ,time.ToShortDateString()));
    Response.ContentType = "application/vnd.xls";
    System.IO.StringWriter writer = new System.IO.StringWriter();
    System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(writer);
    gdvData.RenderControl(html);    
    Response.Write(writer.ToString());
    Response.End();

Response.Write和Repsonse.End停止.hide() 。我需要做的就是显示一个动画，该动画将在单击按钮后启动，并在服务器端数据库工作和 xls 下载完成后停止。我愿意采取不同的方法。

Answer 1

从 asp.net 按钮，这将不会按您的预期工作。您需要使用 AJAX 从常规 HTML 按钮调用您的下载，并且在 AJAX 成功后您可以使用图像隐藏您的 div。