Search code examples
jqueryinternet-explorerinternet-explorer-8jquery-effects

Animated gif no longer animated on jquery .show()


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?


Solution

  • 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.