2010-07-26 18 views
0

J'ai donc cette configuration. Load pour une image avec un rappel .fadeIn(), ça marche très bien. Le problème est que si je tire le .load deux fois de suite sur la même image, il n'obtient pas le rappel!jQuery: .load image, puis fadeIn() échoue lorsque vous cliquez deux fois dessus!

Voici un extrait du 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; 
}); 

Et vous pouvez l'essayer sur mon site (en cours) here. Il suffit de cliquer deux fois de suite sur une vignette à gauche et le loader.gif ne disparaît pas, c'est-à-dire qu'il ne parvient pas à .fadeIn().

Remarque: (?) Je crois que cela affecte seulement les navigateurs WebKit

Répondre

1

J'ai testé votre site http://www.benjibee.com/ dans Chrome (navigateur WebKit, pour autant que je sache), et ont été incapables pour reproduire le problème. Bien que cela prenne un peu plus de temps que dans Firefox (mais cela peut être juste mon ordinateur).

Quelques suggestions/observations.

Avec vos interactions basées .click(), en utilisant le format:

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

cessera-t-une ancre/lien d'exécuter en tant que tel, et peut être évoquée au début du traitement jQuery, plutôt que d'attendre la fin pour utiliser return false. Vous pouvez également stocker dans une variable javascript les détails de l'image/du lien en cours, puis vérifier par rapport aux clics suivants sur les vignettes - tel quel, si img1.jpg est affiché, et le pouce pour cette image. est cliqué, l'image agrandie disparaît, puis disparaît à nouveau sans modification. Juste une petite chose.

+0

Merci d'avoir jeté un oeil, je l'apprécie. Je pense que je ne devrais pas diriger les gens ici sur le site pendant que je travaille activement dessus, hah. Je vais travailler sur une copie locale pour l'instant, donc, en l'état, la page en place a cette bêtise. En ce qui concerne le retour faux, je suis conscient de l'autre méthode, j'ai eu ceux collés là parce que je prévois d'utiliser jQuery BBQ pour la navigation de hachage, mais je voulais me débarrasser d'eux tout en construisant d'autres codes. – Benji