jQuery animations are choppy and stutter in Firefox

Question

I like to think I'm not a dummy, but I can't get my jQuery horizontal slideshow to animate smoothly especially in FireFox (on a Mac). Anyone have advice?

Animation is being done like so:

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});

Example link:

http://mayfourteenth.com/w/lookbook?preview=1

Solution 1

I've tested in Firefox, Chrome(dev) and Safari on windows and the animation stutters in all browsers(but more in FF though).

To increase JavaScript performance you could get rid of all the getElementById or $("div#mydividentyfier") calls. If you store them in variables instead they will be cached. Example: It could increase performance quite a bit to do this:

var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {    
    lookbook.width(lookbook).width()*$('#lookbook img').length)
    if (look_caption) {
        look_caption.html(lookcaps[0]);
        look_caption.fadeIn();
    }

Instead of:

if ($('#lookbook').length) {    
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
    if ($('#look_caption')) {
        $('#look_caption').html(lookcaps[0]);
        $('#look_caption').fadeIn();
    }

I would also recommend using data URIs for the images as it reduces the amount of httpRequests you have to make to get the page loaded.

Solution 2

The animation looks smooth for me in Chrome. However, I believe there are several things you can do to improve smoothness:

First, it's fine to preload all of the images in advance as you do here (at the top). However, displaying them all at once, as in the "Example link", hurts performance, as they are all animating at once:

<div id="lookbook"> 
    <div><img src="/q_images/lib/lookbook/1.jpg"></div> 
    <div><img src="/q_images/lib/lookbook/2.jpg"></div> 
    ...
    <div><img src="/q_images/lib/lookbook/15.jpg"></div> 
</div> 

Instead of doing this, you can simply cue up the next and previous image on either side of the current image, but then don't have the rest of the images in the page until they're needed. (Preloading them is still fine though.)

Other things which can improve performance slightly are things like the following:

1. Use smaller (by pixels and/or file size) images.
2. Make minor code optimizations by computing things in advance.
3. Use a stand-alone animation library instead of jQuery.

Solution 3

You may also want to use this

.animate({left:'-=825'}); //next
//and
.animate({left:'+=825'}); //previous

Instead of

.animate({left: -((lookbook-1)*825)+'px'});

Comments

[Millions]

I appreciate what you're getting at but, that breaks the "snapping".