Simple jquery fading slideshow hogging cpu - help me optimise?

've got a fairly simple slideshow object which takes an array of images and rotates through them, with a fade between each picture. But it seems to use a fair amount of cpu, especially on IE, a little less so on firefox. Any ideas on how to optimise this? I’m concerned that the way the object refers to itself may not be the most efficient.
Cheers


function picSlideShow(elementID, picArray)
{
    var self=this;
    this.id = elementID;
    this.picArray = picArray;
    this.pointer=0;
    this.fadeOutPeriod=500;
    this.fadeInPeriod=500;
    this.holdPeriod=3500;
    this.length=picArray.length;
    this.waitBeforeFadeOut=function(){window.setTimeout(function(){self.runSlideShow()},this.holdPeriod);}
    this.runSlideShow=function(){$('#'+this.id).fadeOut(this.fadeOutPeriod, function(){self.nextPic();});}
    this.nextPic=function()
    {
        this.pointer++;
        if(this.pointer>=this.length)this.pointer=0;
        $('#'+this.id).attr('src',this.picArray[this.pointer]);
        $('#'+this.id).fadeIn(this.fadeInPeriod,function(){self.waitBeforeFadeOut();})
    }
    for(a=1,b=picArray.length; a<b; a++) {preloadImage(this.picArray[a]);}
}

$(document).ready(function()
{
    //on doc load, instantiate the slideshow object   
    slide = new picSlideShow('slideshow1',new Array("/images/dailydeal/weeklydeals_mop_margin.jpg","/images/dailydeal/weeklydeals_teasmade_margin.jpg"))
    slide.waitBeforeFadeOut();
   
});

This would be a good time to familiarize yourself with a javascript profiler. Firebug has one, for example.

edit- With that said, I’m doubtful you will get any meaningful improvements by optimizing the code posted. You probably need to either lower frame rate of your animation, or make changes that help the browsers rendering engine(which might be stuff like changing styles or the dom).

This would be a good time to familiarize yourself with a javascript profiler.

Javascript profilers scare me. But yes, I should overcome my fears.

…make changes that help the browsers rendering engine(which might be stuff like changing styles or the dom)

Interesting…Could you expand on that please, i’m not quite sure what you mean.

I don’t really have any idea’s for what you could do for this case, but I wouldn’t be surprised if something existed. I’m just thinking in my head a little about how the browser probably works.

I’ll give an example. Think about this page. Imagine we wanted to animate your avatar to be 3 times it’s size. So every 15ms or so, the width and height get increased. Every time you change the size, the browser needs to recalc other other things on the page that depend on it. Because once the image gets too big, it starts stretching that table cell it’s in, and when the cell changes, it will affect the dimensions of the cell to the right, which in turn affects all the stuff in that etc… The dimensions and positions of all these things need to get constantly recalculated and redrawn.

Now, if your image was taken out of the flow of the document, for example via position:absolute, changing the size wouldn’t change anything else. Might look a little funny when it seems to start growing over the page, but I think the browser is likely to do this far more efficiently.

I know yours doesn’t change the size, I just though it to be a good example.

Yeah I see what you mean about minimising changes to rendering in the DOM.

Is it perhaps the case that fading the opacity of elements in INHERENTLY expensive in terms of CPU? And no matter how much I optimise, it’s going to be a drag?