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

Question

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');
            ....
        }
    }
}

Answer 1

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();