Animated gif no longer animated on jquery .show()

Question

As far as I can tell this only affects IE 8.

Using the following code, the gif appears but is not animated (stuck in one position):

$("#<%=assessmentListLinkClientID() %>").click(function(){
        $("#assessmentListLoaderImg").show();
    });

I've also used .css('display', 'block') with the same results.

Is there an accepted way (perhaps better than this) that produces reliable cross-browser results for showing an animated gif?

Answer 1

It appears this is the way to solve this issue:

<div id='myHiddeDiv' style='display:none'> 
<img src='' id='myAnimatedImage'> 
</div> 
<input type='button' value='show image' onclick='showDiv();'> 

<script languag='javascript'> 
function showDiv() 
{ 
document.getElementById('myHiddeDiv').style.display =""; 
document.getElementById('myAnimatedImage').src = "http://www.nowhere.com/animatedGif.gif"; 
} 
</script> 

You need to re-set the src of the image tag, this forces IE to render it again and hence show it animated.

Answer 2

I had this problem a while ago and while I didn't solve it I did spot something in the jquery UI recently that I was going to investigate further. There seems to be a setting in the jQuery UI engine for setting things as hidden off-screen and I was wondering if that might get around the problem with IE not rendering animated gifs properly because they're invisible at render-time. My theory was that if it was visible but "off-screen" then IE might render it as animated but it would be invisible to the user.

The link is here:

http://jqueryui.com/docs/Theming/API

And it's the layout helper here that I'm thinking of :

.ui-helper-hidden-accessible: Applies accessible hiding to elements (via abs positioning off the page)

I can't vouch for this as an answer but it was on my list of solutions to try myself when I had the chance.

If you try this and have any success with it let me know :)