[jQuery] Animation delayed after many clicks
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