Comment charger javascript plus rapidement?

Question

En ce moment, nous avons un diaporama d'images qui utilise javascript. Cependant, lorsque la page est en cours de chargement, les images seront brièvement affichées dans un style normalisé (avec des puces) avant que le javascript ne soit lu et exécuté. Le problème est que nous ne voulons pas que les visiteurs voient la liste d'images "nues", même brièvement (parfois cela durerait 2-3 secondes). Nous voulons qu'ils immédiatement voir juste une image (pas une liste) qui se transforme en une autre (ce que fait le js).

C'est le code html pour le diaporama:

<div class="slideshow"> 
    <ul> 
     <li><img src="images/....jpg" /></li> 
     <li><img src="images/....jpg" /></li> 
     <li><img src="images/....jpg" /></li>         
     <li><img src="images/....jpg" /></li> 
     <li><img src="images/....jpg" /></li> 
    </ul> 
</div> 

Voici le diaporama que nous avons utilisé:

http://www.littlewebthings.com/projects/blinds/

et c'est le fichier JS:

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

Je pense que tha Cela peut être un problème de cache car le diaporama de démonstration ci-dessus n'a montré qu'une fois la liste d'images "nues". Une fois actualisé/re-visité, il ne s'affiche plus (ou montre encore beaucoup plus vite que la première fois que c'est presque imperceptible). La nôtre, d'autre part, continue de relire le javascript comme si c'était toujours la première fois (si vous voyez ce que je veux dire).

Answer 1

Bien que cela ne répond pas directement à la question du chargement instantané, une option serait de commencer par votre div caché avec <div class="slideshow" id="myId" style="visibility: hidden">, puis dès que vous savez que votre JS est chargé, montrez-le (par exemple en utilisant jQuery):

$("#myId").css("visibility", "visible"); 

Answer 2

Masquer toute la liste avec css et ne montrer que la première image. Donc, l'utilisateur ne verra pas toute la liste en dehors de la première image.

Answer 3

Essayez modifier le style ul de cette façon:

ul{ 
    list-style:none; 
} 

ul li{ 
    position:absolute; 
} 

l'enveloppe de la liste doit avoir une hauteur fixe;)

Hope it helps