bug 255 - animated GIF image rendering issues in IE

Issue: #255
Affects: IE6, IE7, IE8

In general IE has no issues rendering Animated GIF images... however with all this Web 2.0 stuff going on where animated "spinners" are used to indicate "activity" in AJAX applications a bug has started to become exposed.



It is common to have a pre-loaded animated GIF image rendered as part of a page, that has its style (or a wrapping element) set to display:none;

Then whenever it is needed, simply setting the display to 'inline','block' or even '' will then display the animated image.

The problem is, that sometimes IE refuses to animate the image. It just sits there in a still frame as if there were no animation sequence.

It appears to be some sort of threading/race condition and is most obvious if right after setting the display back to a "visible" state the location.href is changed, or the form is submitted.

Its one of those odd bugs that doesn't always happen, but appears "glitchy" when it does.

Example:

<img src="img/busy.gif" width="16" height="16" border="0" style="display:none;"/>
<script type="text/javascript">
  var busy = document.getElementById('busyicon');
  busy.style.display = 'inline';//or try '', or 'block'
  document.forms[0].submit();
</script>

Known Workarounds: Some kind of sorta? There are various speculations on this (and I'm opening comments on this to bring in more), but anything that attempts to reload the src of the animation afterwards, or in another thread appears to help.

Example Workaround Code:

<script type="text/javascript">
  //spawn another thread to show activity
  setTimeout('showSpinner',150);//spawns another thread to kick off after the submit
  document.forms[0].submit();

  function showSpinner(){
    var busy = document.getElementById('busyicon');
    busy.style.display = 'inline';//or try '', or 'block'
  }
</script>

Related Issues: None.

Bug/Site Feedback |
Submit a bug

bug 208 - onload event fires for every frame of an animated GIF

Issue: #208
Affects: IE5, IE5.5, IE6, IE7
Fixed In: IE8

The onload event can be attached to a window, frame or image element and will fire when the element has fully loaded. However in IE, if you attach this event to an animaged GIF image, it will fire for EVERY frame in the animation!

Example:

<img src="waiting.gif" onload="waitLoaded();"/>

If you load this in IE, with an animated GIF, it will continuously execute the waitLoaded() event handler until the user presses Escape/Stop.

Known Workarounds: One.
The only workaround for this, is to immediately nullify the event handler after it has fired the first time.

Example Workaround Code:

<img src="waiting.gif" onload="waitLoaded();this.onload=null;"/>

Related Issues: None.