Fondu dans la liste des images, une fois que tous sont chargés

Question

J'ai un groupe d'images dans ce format:

<ul id="photo-list"> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
</ul> 

Mon but est qu'une fois que toutes les images ont fini de charger, puis # photo-liste se fanent dans Je voudrais aussi afficher une animation de chargement avant le chargement des images. Toute aide est appréciée!

Answer 1

Je suppose que je suis un peu préoccupé par la raison pour laquelle vous voulez attendre qu'ils soient tous chargés avant de les montrer. Obtenir du contenu rapidement est important pour la fidélisation de l'audience.

mais faire ceci:

choses Structure:

 
<div id="photos"> 
    <img src="yourloading.gif" /> 
    <ul id="photo-list"> 
     <li><img src="" /></li> 
     <li><img src="" /></li> 
     <li><img src="" /></li> 
    </ul> 
</div> 

Ensuite, vos styles par défaut:

 
#photo-list { display: none; } 

Ensuite, votre jQuery

 
$(document).ready(function() { 
    $("#photo-list li img:last").onload(function() { 
     $("#photo-list img").hide(); 
     $("#photo-list").fadeIn(); 
    } 
} 

Bien sûr, cela ne détecte si la La dernière image est chargée et en fonction de la taille de l'image, cela créera probablement une condition de concurrence où les autres images ne seront peut-être pas chargées. Probablement un meilleur moyen serait d'utiliser la méthode de données de jQuery pour définir un indicateur pendant l'événement onload puis tester pour voir si toutes les images ont cet ensemble de données, puis déclencher le masquage et le fondu.

Maintenant si vous êtes Si vous voulez faire un peu de cyclage d'images, utilisez simplement le plugin jQuery, cachez les images dans l'UL et laissez les montrer. J'utilise le cycle sur mon site web photo http://www.robmiracle.com

Answer 2

Cela peut être trop simplifiée pour vos fins, mais si la page se compose de peu d'autre que votre liste d'images, vous pouvez simplement utiliser

$(window).load(function({ ... }); 

Tout code dans cette fonction ne s'exécutera pas jusqu'à ce que tout le contenu de la page ait été chargé. Si vous avez un autre contenu sur la page qui pourrait retarder l'exécution de ce code, je serais d'accord avec MiracleMan en ce que vous trébucheriez un drapeau pour chaque image qui charge et ensuite exécutez votre code une fois que tous les drapeaux ont la valeur true.