Question

I’m new to jQuery, I was making a slide carousel with it and I don’t know if I miss something here so please take a look at my script:

function gotoItem(main, hidden, con, speed, state) {
con.css('display', 'none');
switch(state) {
    case 'next' :
    main.children(':first').appendTo(hidden).css('left','0px');
    hidden.children(':first').appendTo(main).css('left', '730px');
    lmove = '-=120px';
    middle = 3;
    end = 6;
    break
    case 'prev' :
    main.children(':last').prependTo(hidden).css('left', '0px');
    hidden.children(':last').prependTo(main).css('left', '-230px');
    lmove = '+=120px';
    middle = 3;
    end = 6;
    break;
}

main.children().each(function(i) {
    if(i==end) {
        $(this).stop().animate({
        left: lmove
        }, speed, function() {
        con.css('display', 'block');
        });
    } else {
        if(i==middle) {
            $(this).stop().animate({
            left: lmove,
            opacity : 1
            }, speed);
        } else {
            $(this).stop().animate({
            left: lmove,
            opacity : 0.3
            }, speed);
        }
    }
    });
}

Actually there’s nothing wrong with the code but it really bugged me when I found out that the script has eaten up a lot of memory (about 100kb everytime the function runs), and not to mention the cpu’s been up and down about 20-30 percent (I’m using single-core laptop and my browser is Chrome 12). I’ve been testing it with Firefox and the result is basically the same. So, any suggestion? How should I rewrite the script so that it can go faster/less memory leaks? Or maybe there’s nothing more I can do with the script? Thank you in advance

Answer 1

animating the left property is always memory consuming. You could rather use an overlying div with overflow:hidden; specified, and then use .scrollLeft() to animate the slides.

Refer to jQuery for Designers – Fun with overflows

This already takes us to another point, where you can save resources. Instead of appending and prepending items the browser has to render afterwards, you initially load the content and just place it out of sight. This is clearly a decision of performance vs. load times and might not be that impressive on your overall performance, but generally speaking, heavy Dom Manipulation is to be avoided if you target lower-end machines.