Comment faire en sorte que le javascript se charge plus rapidement ?

Question

Actuellement, nous avons un diaporama d'images qui utilise le javascript. Cependant, lorsque la page est en cours de chargement, les images sont brièvement affichées dans un style de liste normal (avec des puces) avant que le javascript ne soit lu et exécuté. Le problème, c'est que nous ne voulons pas que les visiteurs voient la liste d'images "nue", même brièvement (parfois, cela dure 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).

Voici 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 voici le fichier JS :

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

Je pense qu'il s'agit peut-être d'un problème de cache, car le diaporama de démonstration ci-dessus n'a affiché la liste des images "nues" qu'une seule fois. Une fois qu'il est rafraîchi/visité, il ne s'affiche plus (ou s'affiche encore, mais beaucoup plus rapidement que la première fois, au point d'être presque imperceptible). Le nôtre, par contre, continue à relire le javascript comme si c'était toujours la première fois (si vous voyez ce que je veux dire).

Answer 1

Cacher toute la liste avec css et montrer seulement la première image. Ainsi l'utilisateur ne verra pas toute la liste à part la première image.

Answer 2

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

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

Answer 3

Essayez d'éditer le style ul de cette façon :

ul{
    list-style:none;
}

ul li{
    position:absolute;
}

Le wrapper de la liste doit avoir une hauteur fixe ;)

J'espère que cela vous aidera