Show an animated gif onClientClick

To show an animated gif, something like loading onClientClick is a simple task. You just have to add a JavaScript function on the click event so the JS function will take care until the next page loads from the server. Inside the JS function we just have to hide the excising div and show the div which contains animated loading gif.

I have done it and it works fine on every other browser except IE. On IE the gif is shown but it is not animated. I have to do some R&D and what I found was IE doesn't do anything like that when it is loading another page (communicating with server) and was commented as a feature limitation of IE.

But there should be a way to do that, that's what I was thinking and I found a pretty simple way to do that. Here it is and if you have a better way please share it here.

<div id="divProgress" runat="server"> 
</div>

<div id="Div1" runat="server">

The web form comes here …

</div>

 

The JavaScript was like this.

<script type="text/javascript"> 
<!-- 
  function ShowProgress() { 
  document.getElementById('<%=Div1.ClientID %>').style.display = 'none';       
  document.getElementById('<%=divProgress.ClientID %>').style.display = "block"; 
  document.getElementById('<%=divProgress.ClientID %>').innerHTML = '<div align="center"" class="ltGreenBorder"><br /><img alt="Progress" align="top" src="/images/pleasewait.gif" /> </div>';

    } 
//--> 
</script>

 

What I have done is simply updates innerHTML for the loading div. The gif started animating magically.