Ordre d'initialisation de jQuery

Question

Je construis une page où je veux utiliser le script Galleria (http://devkick.com/lab/galleria/) et le widget Accordéon de jQuery pour masquer différentes catégories de vignettes de la galerie. Dans mon initialisation je l'ai écrit comme suggéré par les manuels des deux scripts:

<script type="text/javascript"> 
     jQuery(function($) { 
     $('ul.gallery').galleria({ 
     insert: "#image" 
     }); 

     $("#thumbs").accordion(); 

     }); 
</script> 

La fonction galleria() crée des vignettes et affecte la taille appropriée pour eux. Ensuite, la fonction accordion() attribue ses styles et réduit les éléments actuellement invisibles. Avec le code ci-dessus, j'ai un problème avec certaines images vignettes devenant invisibles en raison d'avoir des dimensions nulles. Si je mets des alertes avant que les tailles des vignettes ne soient affectées dans la fonction galleria(), je peux voir que pour les images qui se trouvent dans les pages invisibles de l'accordéon, leur conteneur n'a aucune dimension à ce moment-là. C'est très étrange pour moi parce que je pensais que ces fonctions s'exécutent consécutivement et que accordion() n'est pas appelée avant que galleria() ne soit terminée.

Quoi de plus étrange, si je mets une alerte avant la fonction accordéon, alors tout est traité dans le bon ordre.

Il est évident que je suis confronté à une condition de concurrence ici. Pourquoi cela arrive-t-il et que dois-je faire pour garantir une séquence d'initialisation ordonnée?

Answer 1

Ceci est juste une supposition, mais je suppose que cela a quelque chose à voir avec les scripts en cours d'exécution avant le téléchargement des images. Cela semble expliquer pourquoi le alert() avant la fonction d'accordéon fait fonctionner les choses. Cela donne une chance aux images de se charger.

Si cela vous convient, vous devez utiliser le gestionnaire d'événements load() de jQuery pour vous assurer que les images sont entièrement chargées.

Docs pour load(): http://api.jquery.com/load-event/

Answer 2

Je suppose que la condition de la course pourrait être dans le fait que toutes les images risquent de ne pas être encore une fois téléchargé galleria les a ajoutés. Cela amènerait la fonction accordian à supposer que les images sont nulles par zéro.

La raison pour laquelle l'ajout d'une alerte fonctionne est parce qu'elle prend et au moment où vous le fermez, les images ont été téléchargées. Si vous voulez être sûr de l'ordre d'exécution, regardez dans firebug et console.log au lieu d'utiliser des alertes, qui ne bloquent pas l'exécution du script comme le fait l'alerte. En ce qui concerne votre problème principal, je verrais si galleria offre une fonctionnalité de rappel pour s'assurer que toutes les images sont téléchargées avant de passer à autre chose.