Animated GIF bug in Internet Explorer 7

Today I attempted to get a progress indicator to work in IE7. My idea was that I’d have an animated GIF on a page, hidden with style=”display: none;”. Then, in the onclick event I’d toggle it visible again using JavaScript, so that the progress indicator would animate as the page was submitted and the next page was loading.

Surprise, surprise, it didn’t work. IE simply refused to animate the GIF when the form was submitted. I googled and googled with no avail – until I ran into a simple and working solution. I won’t present the non-working ones here, they can be found with any relevant keywords.

The working one is the following in its entirety: Use a div to display the indicator as a background image. In addition to toggling display, also toggle visibilty.

In my HTML, I have two divs, one with an id of Indicator, and in it another one with id image and some text. The JavaScript goes as follows.

1. First, in the function called from the onload event of body I hide the outer div:

document.getElementById(‘Indicator’).style.display = ‘none’;

document.getElementById(‘Indicator’).style.visibility = ‘hidden’;

2. Then, in the function called from the onsubmit event of the button input in the form, I show the outer div and set the background image for the inner one:

document.getElementById(‘Indicator’).style.display = ‘block’;

document.getElementById(‘Indicator’).style.visibility = ‘visible’;

document.getElementById(‘image’).style.backgroundImage = ‘url(indicator.gif)’;

That’s it!

I have tested this in IE7, but it might also work in IE6.


6 thoughts on “Animated GIF bug in Internet Explorer 7

  1. Jeff says:

    I have been searching for a long time, but cannot find a working solution for this issue.

    Your code will allow the user to see the hidden div’s if JavaScript support is disabled in their browser and I could not get the background image to display even after correcting the placement of the quotation marks in the last line of code.

  2. This is a neat way to get around this IE7 bug, compatible with Firefox, Safari, etc. and it works for IE6 as well.

    It’s worth noting that if, to take your example, “image” had it’s background set to “indicator.gif” in the stylesheet, it works if you reset it with JS to “indicator.gif”, but it you set it in JS to something else, say “new_indicator.gif”, then it stops working. Best not to set the background at all in the stylesheet (even if you will then be forever worried that if somebody does set the stylesheet, your code will stop working with IE6 and IE7 again).

  3. pepe says:

    a solution for ie6 ie7 and firefox 3… but with this, chrome and safari wont display the animated gif…. guess that we can’t have everything

  4. Liad says:

    If I understand correctly, you are just refreshing the animated gif image inside the div.

    This does not really solves the problem, since the image is usually in a hidden div in order to display it faster when necessary and not re-load it every time from the server when there’s a need to display it…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s