Animated GIF not working in Internet Explorer

Submitted by litrik on

Internet Explorer just keeps amazing me (in a bad way). The latest surprise is an animated GIF that does not work.

I was using the following jQuery code:

$("body").append(
  '<div id="throbber" style="display:none;"><img src="loading.gif"/></div>');
...
$("#throbber").show();

Internet Explorer shows the image but the animation does not work. Of course there is no problem in Firefox.

Based on the discussion here this is caused by the fact that the element was invisible when it was added to the DOM. Afterwards when you show the element IE does not start the animation.

As a workaround you can restructure your code and add the image to the DOM when it must be shown. That works in IE (and the other decent browsers).

$("body").append('<div id="throbber"><img src="animation.gif"/></div>');

Topic: 

17 Comments

@Michael Schøler hello Can

Submitted by Anonymous on

@Michael Schøler
hello
Can you please confirm that if the animation works when you are submitting a page?
Say you are uploading a file. when you click upload, the spinner appears before the page gets submitted.

for me, in this case the animation do not work. works fine in FF

thanks

doesn't work for me with IE

Submitted by Anonymous on

doesn't work for me with IE 6 and 7 at least.
thing is, it's animating fine, >>until<< the new page is beeing loaded. as soon as the loading of the new page starts, the GIF stops animating - where this is the only situation i need that animation, while a page is loading. *sigh*

currently have the showLoadingStuff() within an onunload event. dunno if this is a problem too. was just a quick hack and it does work for all other browsers i've tested.

is there a way to manualy trigger the animation?