[jQuery] Animation delayed after many clicks

[ryanfitzer]

I am building a gallery with transitions and am finding some bugs that
I'm not able to figure out. Any help would be appreciated.

The URL:

http://ryanfitzer.com/dev/wp-sandbox/portfolio/gallery-four


The Issue:

When one clicks on a thumbnail it switches out the large image and
fades it in. If the large image is smaller or larger than the previous
image the content below (the footer) animates up/down accordingly.

After clicking around on the thumbnails for a bit the up/down
animation becomes delayed. It takes 10-15 seconds to fire at times.
I'm thinking this is a cache issue (?).


The relevant function:

function imageSwap() {

        // When a thumbnail gets clicked
        jQuery('.pr-thumbs a').click(function(){

                // Set the height of the gallery
                var gallery = jQuery('.pr-gallery');
                var galleryHeight = gallery.height();
                gallery.height(galleryHeight);

                // Gather some variables
                var thumb = jQuery(this);
                var lgImage = jQuery('.pr-galleryfullsize img');
                var caption = jQuery('.pr-caption');
                var href = thumb.attr('href');
                var alt = thumb.attr('title');
                var src = lgImage.attr('src');

                // Add the loading class to the thumb
                thumb.addClass('loading');

                // Size the spinner element to the thumbnail size for centering
                var loaders = jQuery('.thumb-loading-wrapper, .thumb-loading-
spinner');
                var imgHeight = thumb.children('img').height();
                var imgWidth = thumb.children('img').width();
                var loaderCSS = {
                        width: imgWidth,
                        height: imgHeight
                }
                loaders.css(loaderCSS);

                // Test to see if the thumb that was clicked is not already 
showing
                if(href !== src) {

                        // Fade the caption and insert the new caption text
                        caption.fadeOut('fast', function(){
                                caption.css('display', 'none').html(alt);
                        });

                        // Fade the large image and change out the src attribute
                        lgImage.fadeOut('fast', function(){
                                lgImage.css('display', 'none').attr('src', 
href);

                                // Once the large image has finished loading...
                                lgImage.load(function(){

                                        // Remove the thumb's loading class
                                        thumb.removeClass('loading');

                                        // Animate the height of the gallery to 
match height of large
image
                                        var lgImageHeight = lgImage.height();
                                        gallery.animate({
                                                height: lgImageHeight+39
                                        }, 250, function(){

                                                // Fade the image in
                                                lgImage.fadeIn('slow');
                                                caption.fadeIn('slow');
                                        });
                                });
                        });
                } else {
                        thumb.removeClass('loading');
                }
                return false;
        });
}

Thanks for any help you can give me. Also, if you have any feedback as
to a better way to accomplish any of this behavior I would be very
appreciative.

Ryan