jQuery: .load image, then fadeIn() fails when clicked twice!

Question

Hey there,

So I've got this .load setup for an image with a .fadeIn() callback, that works just fine. The problem is if I fire the .load twice in a row on the same image, it doesn't get to the callback!

Here's a snippet of the code:

$('#thumbs a').click( function() {
  imageSrc = $(this).attr('href').substring(1)+'.jpg';   // grab src, remove hash, add jpeg extension
  $('#viewer img').fadeOut('fast', function() {     // fade old image out fast, wait until finished before changing src
   $('#viewer img').attr('src', (mediumPath+imageSrc));  // change src to new image
   $('#viewer a').attr('href', imageSrc);
  });
  $('#viewer img').load(function(){        // once image is loaded, fade the img back in
         $('#viewer img').fadeIn('slow');
        });
  return false;
 });

And you can try it on my website (in progress) here. Just click on a thumbnail on the left twice in a row and the loader.gif doesn't go away, i.e. not getting to .fadeIn().

Note: I believe this is only affecting WebKit Browsers(?)

Answer 1

I have tested your site http://www.benjibee.com/ in Chrome (Webkit-based Browser, as far as I know), and have been unable to replicate the problem. Although it does take a little longer than in Firefox (but that may just be my computer).

A couple of suggestions/observations.

With your .click() based interactions, using the format:

.click( function( e ) {
  e.preventDefault();
  // Rest of your Javascript Code here...
} );

Will stop an anchor/link from performing as such, and can be evoked at the start of the jQuery processing, rather than waiting for the end to use return false.

You may also want to store in a javascript variable the details of the current image/link, and then check against that on subsequent clicks on the Thumbnails - as it stands, if img1.jpg is shown, and the thumb for that image is clicked, the current larger image fades out, and then fades back in again with no change. Just a tiny thing.

Answer 2

Adding: if (imageSrc != $(this) {*image swap*}; works like a charm, thank you!