Récupérer toutes les images d'un slideshow au chargement de la page

[vg-matrix]

Salut tout le monde,
J'ai une animation en Javascript qui fait défiler 6 images. En local, tout se passe bien mais une fois sur chez l'hébergeur, je me rend compte que mon navigateur initie une connexion au serveur pour charger l'image suivante, ce qui n'est pas très intéressant.
J'aimerais donc que mon navigateur télécharge à l'ouverture de la page les 6 image sen local pour mieux présenter l'animation mais j'ignore comment procéder encore moins si d'autres solutions (meilleures que la mienne) existent.

[SpaceFrog]

des mots magiques : "image preloader"

Code :

1
2
3
4
5
6
7
8
 
var preload= new Array();
preload[0]=new Image()
preload[0].src='image1.jpg'
preload[1]=new Image()
preload[1].src='image1.jpg'
preload[2]=new Image()
preload[2].src='image1.jpg'

puis tu attibues les src de ton animation avec les scr de l'array

Code :

preload[0].src

Autre chose, optimise les images afin qu'elle pèsent moins lourd...
les fichiers seront moins gros et les chargement dureront moins longtemps.
Il existe des petit freeware genre pngoptimizer ou riot ...

Enfin tu peux tester le complete des images pour t'assurer qu'elles sont chargées avant de tenter de l'afficher