Seems like IE animates/processes my loading.gif even though I have set display:none?

I believe this is happening because whenever I perform an ajax request (upon which the loading.gif is set to display:block) the animation does not start at the same position. The starting point feels random which led me to think the animation still goes on behind th开发者_开发百科e scenes in IE. In Firefox the animation starts from "scratch" all the time.

Any ideas?

I don't know how animating GIFs works internally in IE and FF, but I guess it's well possible that one engine runs the animation behind the scenes, and the other doesn't. I doubt there is a standard for that.

Setting the image element's src property (in the same moment you set display) should have the animation start reliably from scratch.

Think about it this way, if images are turned on but CSS is disabled, what would the gif be doing? It would be running the whole time. display:none tells the browser "This element is on the webpage, but just don't show it." So it makes sense that it's running the whole time and that's probably the logic behind IE's implementation.

I'm not a js wizard, but I would expect actually removing the image node from the document and then inserting it again when needed would have the desired effect, and Pekka's suggestion of setting the src property sounds good as well.

In my experience, IE runs GIF animations from the start each time, but much slower. In FF it's perfect and Chrome it runs it once. If it's a looping gif, with display set to none they will run in the background because they have been called but not displayed.. I think.