Animated GIF doesn't start animating after display

Question

I'm trying to display an animated GIF after a button click. The image is displayed correctly but it doesn't start animating. I tried many techniques (wrapping it with a div, SetTimeOut...) but none is able to display the animated GIF on laptops and mobile devices. Some techniques work on laptops but not on mobile devices such as setting the timeout in javascript. Here is the code. How can I make it work for both laptops and mobile devices:

<script>
function AnimateGif() 
{           
$("#anim_upload").css("display", "");
}
</script>

<asp:ImageButton CssClass="uploadedFile_btn" runat="server" ImageUrl="icon-upload2.png" ID="uploadedFile" OnClick="Button1_Click1" OnClientClick="AnimateGif();"/></div>

<img alt="" src="anim_upload.gif" id="anim_upload" style="display:none" />

LAPTOP solution

The following works well on laptops but it doesn't seem to work on most mobile devices. Wonder why!!!

<script>
function AnimateGif() 
{           
setTimeout('document.getElementById("anim_upload").style.display = "block"', 200);    
}
</script>

Answer 1

You are using asp:ImageButton and used OnClientClick to handle js call, so when this is clicked obviously js will be called , but at the same time page will be posted back (refreshed) . So when page is refreshing gif won't animate ( i can say it is browser issue, read this - gif animation not playing on refresh). So it make it work, you need to return false from js call use following.

OnClientClick="return AnimateGif();" -- In aspx code.

In javascript code:

function AnimateGif() 
{           
   $("#anim_upload").css("display", "block");
   return false;
}