crunchlife: IE7's Inanimate GIF

IE7's Inanimate GIF

Ryan Baxter — Wed, 11 Jun 2008 05:06:00 -0700

Animated GIFs are most often used as activity indicators in modern AJAX (asynchronous JavaScript and XML) enabled websites. I decided to use a GIF (Graphic Interchange Format) from ajaxload.info on an application that I’ve been developing at work. The application performs server-side processing on files uploaded by employees. Processing time varies depending on the size of the file. Larger files take longer.

I wanted the animated GIF to appear when the file upload button was clicked so I placed the image within a DIV tag and hid it by setting a blank CSS display property. OnClick of the upload button, a JavaScript function toggled the display value to “block”, making the DIV appear. This worked as expected in Firefox and IE6, but not in IE7. The DIV appeared in IE7, but it’s GIF wasn’t moving.

A little googling turned up a helpful comment on Rick Strahl’s blog.

I’ve run into a problem with animated gifs inside of a hidden area of a Web page that is hidden with style.display=’none’. When the area is made visible again, in Internet Explorer this causes the image to not be displayed an animated GIF whatever I try. [sic]

Apparently IE7 doesn’t like to animate hidden GIFs. User submitted comments on Rick Strahl’s blog provided many solutions, but only a couple worked in my situation. The first uses the JavaScript setTimeout method to populate the image’s SRC attribute 200 ms after the function call. The second sets the DIV’s innerHTML to a string containing an IMG tag with the animated GIF.

<script language='javascript'> 
    function ShowLoading(elementId) 
    {
        document.getElementById(elementId).style.display = "block"; 
        setTimeout('document.images["loadingImage"].src = "../images/loading.gif"', 200); 
    } 
</script>

Neither solution is ideal, but setting the element’s innerHTML felt a little bit cleaner to me.

<script language='javascript'>
    function ShowLoading(elementId)
    {   
        var element = document.getElementById(elementId);    

        element.innerHTML = "<img src='../images/loading.gif'>";    
        element.style.display = "block";
    }
</script>

*IE7 may have animations disabled. Go to Tools > Internet Options > Advanced > Multimedia. Checking “Play animations in webpages” may affect how IE7 renders your animated GIFs.

"IE7's Inanimate GIF" by Ryan

Fri, 24 Dec 2010 10:39:40 -0800

Well times have changed but I'm having this problem too. The first solution works in Firefox but the image is still no moving in IE. The second solution seems to work in IE but not in Firefox. fun...

"IE7's Inanimate GIF" by waynenort@hotmail.com

Sat, 08 Aug 2009 23:24:32 -0700

Hello Ryan, I'm stumped with the inanimate gif with uploading and are finding it hard to implement your solution. Would you mind having a look at my code.. //my current java: function popup() { document.getElementById('overlay').style.display='block'; document.getElementById('popup').style.display='block'; } //my HTML, gif and button form: Please wait while we process your request...
//my CSS: #overlay { display: none; position:absolute; top:0px; left:0px; width:100%; height:145%; background:#000; opacity:0.32; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)"; filter:alpha(opacity=32); -moz-opacity:0.32; z-index:14; } #popup { display: none; position:absolute; top: 50%; left: 50%; height:150px; width: 300px; margin-left: -150px; text-align:center; border:1px solid #666666; z-index:15; background-color: #FFFFFF; padding-top: 50px; } many thanks, Wayne

"IE7's Inanimate GIF" by Ryan Baxter

Mon, 06 Apr 2009 10:08:44 -0700

Awesome! Glad this helped someone.

"IE7's Inanimate GIF" by Steve

Mon, 06 Apr 2009 05:37:44 -0700

Thanks Ryan - seems to have done the trick!

"IE7's Inanimate GIF" by Hamish

Thu, 02 Oct 2008 02:41:32 -0700

Thanks for this Ryan - your first solution solved my problem.

"IE7's Inanimate GIF" by Sanjay

Sun, 07 Sep 2008 23:33:27 -0700

Hello Ryan, Thanks for your post. I tried both of the suggested methods but it wouldn't work for me. In my case, every time a request is made , a new Busybox object is displayed, with it a gif is associated. the gif refuses to animate when some process is taking place behind. Is there any other work around to make it animate? thanks, Sanjay