Jquery html() and Internet Explorer Issue

Question

The JS script:

function ShowUploadingAnimation()
{
    $('#info_msg').html("<div style=\"padding-top: 15px; height: 50px;\" align=\"center\"><img id=\"uploading-img\" /></div>");
    $("#uploading-img").attr({ src: "images/uploading.gif", alt: "Uploading" });
}

And the html usage:

<input type="submit" value="Upload" onclick="ShowUploadingAnimation();">
<div id="info_msg"></div>

So my issue is the following: This method works ok in Firefox, but in Internet Explorer the gif file is loaded, but it's not animated, just static... showing only a random frame each time the button is clicked. Any suggestions?

Answer 1

This is a well known issue with ie and animated gif's when showing/hiding images whilst during xhr calls & file uploads. There are lots of solutions given here on a Ricks Strahl blog post in the comments. Maybe one of them will work for you.

Answer 2

Easy trick would be put this into iframe. Instead of <img src=''> use <iframe src=''></iframe>.