Question

I have a jquery bug and I’ve been looking for hours now, I can’t figure out what’s wrong…
I have this code :

     $(document).ready(function(){

$('#ulPhotos a').click(function() {
    var newSrc= $(this).find('img').attr('src').split("/");
    bigPictureName = 'big'+newSrc[2];

    $('#pho').hide(); 
    $('#imageBig').attr("src", "images/photos/"+bigPictureName);
    $('#pho').fadeIn('slow');

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt);
    }); 
    });

and this in html :

<ul id="ulPhotos">
    <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li>
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>

and this in for bigImage :

</div>
<div id="pho"  a name="centre">
<p id="legend"> La Reine de la Nuit</p>
  <img src="images/photos/big09.jpg" alt="Marion Baglan" id="imageBig"/> 

</div>

It simply changes the source of my img in a div named pho… but sometimes when the new image is too heavy, the fadeIn executes on the previous src !! so we see the fadeIn first on the previous image, and then, the right picture appears without fadeIn….

am I missing something?

ps : the page is here http://www.marion-baglan.net/photos.htm#centre if you click fast you can see it… and when I try to put some bigger photos, it’s very obvious…

Answer 1

You need to use the load event like karim suggests, but in a slightly different way to work in all cases, like this:

$('#imageBig').one('load', function() {
    $('#pho').fadeIn('slow');
}).attr("src", "images/photos/"+bigPictureName).each(function() {
  if(this.complete) $(this).load();
});

You need to attach the load handler using .one() for 2 reasons, so we don’t add a .load() handler and every time you change the image it queues another fadeIn, and also so the next cache component doesn’t immediately trigger it twice. It’s important to set the load handler before changing the image source, as a cached image will immediately load, possibly before the handler is attached.

The last piece, the .each() call loops through the images to see if it’s complete, if that’s the case already it was loaded from cache, and not all browsers fire the load event for this…so we’re manually firing it. The .one() call from earlier prevents this from doing anything twice.