JQuery fadeIn/fadeOut image on click jumps while loading new image

Question

There's a gallery with a large image with thumbnails on the side. Click the thumbnail, the large image fades out, new one fades in (src getting called from the rel attribute of the link).

Problem: The old image fades out, re-appears, then jumps to the new image... I'm guessing the new image hasn't loaded yet, since it only happens the first time the image is loaded.

---

HTML

<div id="image"><img src="http://marilynmcaleer.com/images/BeachRoad-title.jpg" width="480" height="383" /></div>
<div id="thumbnails">
    <div class="thumbnail-homes"><a href="#" rel="http://marilynmcaleer.com/images/BeachRoad-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/BeachHouse_thumb.jpg" width="136" height="90" alt="Beach House" /></a></div>
    <div class="thumbnail-nudes"><a href="#" rel="http://marilynmcaleer.com/images/ReducedFigure-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/nude thumbs/reducedfigure_thumb.jpg" width="136" height="90" alt="Patience" /></a></div>

    <div class="thumbnail-murals"><a href="#" rel="http://marilynmcaleer.com/images/BabyElephant-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/mural thumbs/babyelephant_thumb.jpg" width="136" height="90" alt="Baby Elephant" /></a></div>
    <div class="thumbnail-paintings"><a href="#" rel="http://marilynmcaleer.com/images/Charlevox-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/Charlevouix_thumb.jpg" width="136" height="90" alt="Boat Shed" /></a></div>
</div>
<div class="clear"></div>

JQuery

    $(function() {
        $(".image").click(function() {                  // something with class "image" gets clicked and a function happens
            var image = $(this).attr("rel");                // variable (image) is defined to be the rel attribute of the link that was clicked
            $('#image img').hide();                             // hides the old big image
            $('#image img').attr('src', image);
            $('#image img').fadeIn();                       // animate to fade in 
        return false;
    });
});

Live Site: http://marilynmcaleer.com/

---

Any idea how to fix this?

Answer 1

Use the load event so the fade starts once the image is loaded, like this:

$(function() {
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').hide().one('load', function() {
      $(this).fadeIn(); 
    }).attr('src', image);
    return false;
  });
});

This binds the load handler using .one() as to not attach multiple event handlers (adding one every time), and will fade in once the image loads...make sure to set the src after binding the load handler so it's attached and ready to go. Even if the image is fetched from cache, this will work.

---

Alternatively, a bit better solution if possible is to bind that handler just once, like this:

$(function() {
  $('#image img').load(function() {
    $(this).fadeIn(); 
  });
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').stop().hide().attr('src', image);
    return false;
  });
});

Then every time it loads, it'll fade in again, the .stop() is to handle many clicks in a row, queuing up animations.

Answer 2

I always have problems with the nested elements not returning the right event target, so you might want to use live events:

    $(function () {
        var img = $('#image img');
        img.load(function(e) {
            img.fadeIn();
        });
        $(".thumbnails").live('click', function(e) {
            var rel = $(e.target).closest("a").attr("rel");
            img.stop().hide().attr('src', rel);
        });
    });