Paul Irish

Making the www great

Animated GIF Not Animating?

So it turns out that if you set up a loading spinner like this:

1
<div id="spinner" style="display: none"><img src="loading.gif"/>Loading...</div>

And then show the div, the animated gif will not animate in… which browser? IE6, of course.

Solutions:

Refresh the innerHTML content (This is stupid but it works..):

1
2
document.getElementById('spinner').style.display = '';  // show it, and then...
document.getElementById('spinner').innerHTML = document.getElementById('spinner').innerHTML;

OR

Set the animated gif as the div’s css background image instead of using the child IMG element. Perhaps:

1
2
3
4
#spinner {
  background: url(loading.gif) no-repeat 5px 3px;
  padding-left: 20px;
}

The second solution is a little classier and is also better from a semantic POV, IMHO.

Comments