0

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>
Gloria
  • 1,305
  • 5
  • 22
  • 57

1 Answers1

0

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;
}
Community
  • 1
  • 1
Arindam Nayak
  • 7,346
  • 4
  • 32
  • 48
  • You have a point but in my case I'm using asp.net fileupload and I want the animated GIF to be displayed while the file is beeing uploaded to the server and before the page is posted back. Sometimes this delay is quite substantial if the file is big... – Gloria Nov 15 '14 at 10:08
  • For big files ( my guess would be more than 20MB file), if delay is for more time, then it should animate , if it is not animating during that, let me know. – Arindam Nayak Nov 15 '14 at 10:11
  • I tested your code. The GIF started animating on laptops and mobile devices but the page is not posted back which means that the file is not uploaded. – Gloria Nov 15 '14 at 10:20
  • display = block doesn't help.... Is there any equivilence of SetTimeOut in jQuery? – Gloria Nov 15 '14 at 10:33
  • @Gloria, jquery uses same `settimeout`, but definitely you can try other `jquery loader for file upload`. But when i tried the samething, gif animated, not sure why in your case it won't work. – Arindam Nayak Nov 15 '14 at 10:53
  • My problem, as I mentioned earlier, is that I couldn't find one single way of making the animated GIF works on most devices. SetTimeOut works perfectly well on laptops but not on mobile devices... – Gloria Nov 15 '14 at 11:28
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64995/discussion-between-arindam-nayak-and-gloria). – Arindam Nayak Nov 15 '14 at 12:06
  • @Gloria, then you can try `setinterval` - http://www.w3schools.com/jsref/met_win_setinterval.asp, it executes js at some interval. – Arindam Nayak Nov 15 '14 at 12:06
  • setinterval like settimeout works perfecly well on laptops but not mobile devices such as iPad. with setTimeout('document.getElementById("anim_upload").style.display = "block"', 200); the animated GIF disappears and is not displayed at all on mobile devices. – Gloria Nov 15 '14 at 12:21
  • But both uses `javascript` to render, i think there is some css media query for mobile, that is preventing this, please check that, or in chrome , change useragent to mobile(say iPhone) and see if that animation still works – Arindam Nayak Nov 15 '14 at 15:08