Javascript 当onclick事件正在执行代码隐藏时，如何设置在ImageButton上加载gif

我是webdevelopment的新手，在执行代码隐藏导出时，似乎无法显示加载的gif

我的onclick事件位于gridview中的Imagebutton上。你能帮帮我吗？这里有图像按钮：

<HeaderTemplate>
      <asp:ImageButton ID="btnExport"  OnClick="btnExport_Click" runat="server" ImageUrl="~/Images/excel.gif"  AlternateText="Export top records!"/>
      <asp:ImageButton ID="btnExportRed"   OnClick="btnExportRed_Click" runat="server" ImageUrl="~/Images/excel_red.gif"  AlternateText="Export all records!"/>
 </HeaderTemplate>

还有要开火的js：

function showLoading() 
{
   document.getElementById('lblMessage').value = "";
   document.getElementById('ucMarketing_btnSearch').disabled = true;
   document.getElementById('btnClearFilters').disabled = true;
   document.getElementById('imgSaveToSegments').disabled = true;
   document.getElementById('divLoadingImg2').style.display = "";
 }
function hideLoading()
{
  document.getElementById('ucMarketing_btnSearch').disabled = false;
  document.getElementById('btnClearFilters').disabled = false;
  document.getElementById('imgSaveToSegments').disabled = false;
  document.getElementById('divLoadingImg2').style.display = "none";
 }

---

我认为你目前的想法行不通。呈现HTML的客户端浏览器与运行代码的服务器完全分离。单击ImageButton时，浏览器会将HTML表单同步发布到服务器，并等待响应。此响应将在事件处理程序方法结束后的一段时间内发送

如果你想在客户端做一些事情（比如显示和隐藏图像），你需要使用AJAX异步地做一些事情。ASP.NETWebForms使控件的使用变得非常简单

要使其正常工作，可以使用UpdatePanel控件围绕要更改的页面区域。然后添加一个或多个要导致更新的触发器。最后使用控件显示加载的图像。大概是这样的：

<asp:GridView runat="server">
   ...
   <HeaderTemplate>
      <asp:ImageButton ID="btnExport" OnClick="btnExport_Click" runat="server" 
            ImageUrl="~/Images/excel.gif"  AlternateText="Export top records!"/>
      <asp:ImageButton ID="btnExportRed" OnClick="btnExportRed_Click" runat="server"
            ImageUrl="~/Images/excel_red.gif"  AlternateText="Export all records!"/>
   </HeaderTemplate>
</asp:GridView>

<asp:UpdatePanel ID="Update" runat="server">
   <asp:UpdateProgress ID="Progress" runat="server">
      <ProgressTemplate>
         <!-- HTML/ASP for your image -->
      </ProgressTemplate>
   </asp:UpdateProgress>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnExport" EventName="Click" />
   </Triggers>
</asp:UpdatePanel>

---

最后，我使用OnClientClick事件来启动我的Js。OnClick事件执行导出的服务器端函数。在我的导出函数中，我添加了一个唯一的cookie令牌。我将该令牌存储在一个隐藏字段中，并每秒更改一次。在Js函数中，我启动计时器并检查cookie是否与令牌匹配。如果有，我会隐藏正在加载的图像

我在这里找到了这个解决方案：

下面是一个例子：
.
LoadWaitImage
正在调用
hideLoading（）
，这是一个输入错误吗？是的，它是：private void LoadWaitImage（）{ScriptManager.RegisterClientScriptBlock（this.Page，this.GetType（），“showMyImage”，“showLoading（）”，true）；}private void UnloadWaitImage（）{ScriptManager.RegisterClientScriptBlock（this.Page，this.GetType（），“hideMyImage”，“hideLoading（），true）；}另外，这里是包含图像的div：它在GridView之外，但在同一个UpdatePanelit中，注释中的代码很难阅读，您最好编辑您的问题并将其放在那里。非常感谢您的帮助。我尝试了包装我的按钮在UpdatePanel中，但AsyncPostBack似乎不喜欢Response.BinaryWrite。当我进行导出时，我无法摆脱它。啊，好吧，我不知道你在做什么。我想你需要一些客户端代码（例如jQuery click事件处理程序）在请求发送到服务器之前显示正在加载的图像。但是，我不确定在这种情况下动画是否会继续。是的，这正是我解决问题的方法。请参阅我的答案：）。再次非常感谢
<asp:GridView runat="server">
   ...
   <HeaderTemplate>
      <asp:ImageButton ID="btnExport" OnClick="btnExport_Click" runat="server" 
            ImageUrl="~/Images/excel.gif"  AlternateText="Export top records!"/>
      <asp:ImageButton ID="btnExportRed" OnClick="btnExportRed_Click" runat="server"
            ImageUrl="~/Images/excel_red.gif"  AlternateText="Export all records!"/>
   </HeaderTemplate>
</asp:GridView>

<asp:UpdatePanel ID="Update" runat="server">
   <asp:UpdateProgress ID="Progress" runat="server">
      <ProgressTemplate>
         <!-- HTML/ASP for your image -->
      </ProgressTemplate>
   </asp:UpdateProgress>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnExport" EventName="Click" />
   </Triggers>
</asp:UpdatePanel>