Internet Explorer CPU usage goes high after an animated GIF image has been displayed

I have been working on a web application for some time now and did notice that the CPU usage was a bit high a long time ago, but the development has been halted for a while.

Recently I started developing again and discovered that the CPU usage goes high after an animated GIF image has been display as the background image.

I use Ajax to update content and apply CSS classes to elements to display a loading indicator. I remove the CSS class when the content has finished loading. If I comment out the classes in the stylesheet that contains the GIFs, everything looks normal.

I have tested it in Internet Explorer 7 and Internet Explorer 8.

What can be done to alliviate this problem?

var blabla = function() {
    var element = $('id of element');
    element.addClassName('a css classname');

    new Ajax.Request({some parameters},
        onSuccess: function() {
            element.removeClassName('a CSS classname');
            ....
        },
        onFailure: function() {
            element.removeClassName('a CSS classname');
            ....
        },
        onComplete: function() {
            element.removeClassName('a CSS classname');
   开发者_如何学JAVA         ....
        }
    }
}

It's possible that this issue is related to how Internet Explorer loads data needed from CSS classes. Might I suggest an alternate approach: instead of using the loading animation contained within a CSS class, just put the .gif in a visible <img> tag straight into the HTML. Then, when onSuccess or another method is called, you can just run:

$("#ajax-gif").hide();

As already commented on, it looks like it doesn't have anything to do with the GIF image itself, especially not one at 20x20 pixels.

If you are changing the background of a page with a GIF image, it must redraw what's on top of it to a certain extent.

To bring down the CPU usage, either reduce what's on your page before you change the background or stop using GIF images, it's 2011!

If this problem is only occurring in Internet Explorer, it is indeed the redraw issue that commenters to Barnzy's answer have talked about. It should create similar problems across other browsers as well.

One solution would be to use the JavaScript onload event handler to preload all of your GIF images in the DOM, which would reduce the need to redraw and should stop escalating the CPU cycles.

I agree that in 2011 using GIF images is probably not the best approach for web design.