jQuery fadein image on change puis fadeout on load

Question

J'ai un simple curseur d'image que j'ai créé. J'ai une liste de petites images, et chaque fois que l'un d'eux est cliqué, je remplace la source de la grande image cible par cliqué (+ une manipulation avec src pour obtenir une plus grande image du serveur).

Maintenant, je veux le petit clic d'image pour fadeOut grande image, et quand la nouvelle image est chargée à se faner dans

Essayé avec ce code:.

ul.find('img').click(function() { 
    $('#big_image') 
     .fadeOut() 
     .attr('src', this.src.replace('/small/', '/big/')) // Some other src 
     .load(function() { 
      $(this).fadeIn(); 
     }); 
}); 

problème est que lorsque le navigateur met en cache les images, l'image onclick est immédiatement chargée, puis estompée avant et arrière, ce qui semble un peu ennuyeux.

Ce:

ul.find('img').click(function() { 
    $('#big_image') 
     .load(function() { 
      $(this).fadeIn(); 
     }) 
     .attr('src', this.src.replace('/small/', '/big/')) 
     .load(function() { 
      $(this).fadeIn(); 
     }); 
}); 

ne se fane pas du tout.

Une idée?

Answer 1

Quand je l'ai fait quelque chose comme cela, j'utilisé ce plugin jQuery:

http://flesler.blogspot.com/2008/01/jquerypreload.html

Il peut charger automatiquement une grande image et remplacer une petite avec elle. La bibliothèque ne les fait pas disparaître automatiquement, elle les change simplement, mais elle vous donne une poignée pour déclencher un événement lorsque la grande image est chargée.

Answer 2

fixe avec

ul.find('img').click(function() { 
    $('#big_image').fadeOut(500, function() { 
     $(this).attr('src', this.src.replace('/small/', '/big/')) 
      .load(function() { 
       $(this).fadeIn(); 
      }); 
    }); 
});