SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist hessodreamy's Avatar
    Join Date
    Apr 2005
    Location
    uk
    Posts
    524
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    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
    Code:
    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();
       
    });

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  3. #3
    SitePoint Evangelist hessodreamy's Avatar
    Join Date
    Apr 2005
    Location
    uk
    Posts
    524
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Evangelist hessodreamy's Avatar
    Join Date
    Apr 2005
    Location
    uk
    Posts
    524
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •