JQuery fadeIn après src changé mais fadeIn sur le src précédent de toute façon! Je

Question

un bug jquery et que je cherchais depuis des heures, je ne peux pas comprendre ce qui ne va pas ... Je ce 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); 
    }); 
    }); 

et ce en 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> 

et ce pour 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> 

Il change simplement la source de mon img dans un div nommé pho ... mais parfois quand la nouvelle image est trop lourde, le fadeIn s'exécute sur le src précédent !! donc nous voyons le fadeIn d'abord sur l'image précédente, et puis, l'image de droite apparaît sans fadeIn ....

ai-je raté quelque chose?

ps: la page est ici http://www.marion-baglan.net/photos.htm#centre si vous cliquez, vous pouvez rapidement voir ... et quand je tente de mettre un peu plus grandes photos, il est très évident ...

Answer 1

Vous devez utiliser l'événement load comme karim suggère, mais d'une manière de travailler un peu différent dans tous les cas, comme celui-ci:

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

Vous devez joindre le gestionnaire load à l'aide .one() pour 2 raisons, donc nous n'ajoutons pas de gestionnaire .load() et à chaque fois que vous changez l'image, il met en file d'attente un autre fadeIn, et donc le composant de cache suivant ne le déclenche pas immédiatement deux fois. Il est important de définir le gestionnaire loadavant de modifier la source d'image, car une image mise en cache se chargera immédiatement, éventuellement avant la connexion du gestionnaire.

Le dernier morceau, les boucles appel .each() à travers les images pour voir si elle est complete, si tel est le cas déjà il a été chargé à partir du cache, et tous les navigateurs feu l'événement load pour cela ... Nous sommes donc manuellement le tirant. L'appel .one() à partir de plus tôt empêche cela de faire quoi que ce soit deux fois.

Answer 2

fadeIn semble être exécuté sur la précédente source car il est en fait appelé sur la div enveloppant l'image. Lorsque vous masquez la div, l'image précédente reste visible et reste visible jusqu'à ce que la nouvelle image commence à se charger. Essayez la décoloration dans la div une fois que vous êtes sûr que son image a terminé le chargement:

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

Voir l'événement load et notez la propriété .complete d'une image.

Answer 3

merci beaucoup à vous deux, cela fonctionne parfaitement! Votre réponse Nick est un peu compliqué pour le débutant que je suis, mais j'ai compris qu'il est intéressant d'utiliser fadeIn une fois par chargement pour l'optimisation et de charger manuellement au cas où certains navigateurs ne déclencheraient pas l'évènement load depuis le cache.Le cache du navigateur est quelque chose que je considérerai plus dans le futur; maintenant il est tout beau, tout a changé:

if(this.complete)... 

à

if($(this).complete) ... 

parce que ce seul était inconnu .. il n'y a rien de toute façon merci !! beaucoup à apprendre ...