[débutant] succession d'images simulant une animation : c'est lourd à charger

Version imprimable

Bonjour,
Je souhaite réaliser un scroll sur 5 images affichées en boucle pour simuler une petite animation.
Au départ j'ai utilisé 5 images BMP de 150X150 soit 66Ko environ. J'ai tout de suite vu que le chargement des images prenait du temps et c'est saccadé.
Première modification je suis passé en JPG 150X150 soit environ 3,3Ko et..... C'est pareil.
Est-il possible de charger toutes les images avant de commencer l'animation ou d'autres techniques ?
Merci
Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 function MovingPicture() { // Datation de début d'affichage var datation = new Date(); var texte = "<img src='imageNumero_"; texte += (datation.getSeconds()%6); texte += ".JPG' alt='mon commentaire...' border=1>"; document.getElementById("_MovingPicture").innerHTML = texte; setTimeout("MovingPicture", 990); }
Avec dans la page HTML :

Code:

<p align="center"><span id="_MovingPicture"></span></p>

08/06/2006, 14h21
SpaceFrog

oui avec un preload d'images... (cf faq)
ou alors tester le complete des images avant des les rendre visibles ...

salut !
en effet tu peux charger toutes tes images au chargement de la page dans un tableau, et ensuite les appeler pour les afficher

Code:

1
2
3
4
5
6
7
8
9
<script type="text/javascript" language="JavaScript">
			var mesimages=new Array(5);
			var i=0;
			for (;i<5;)mesimages[i]=new Image();
				mesimages[0].src=urlimage1;
                                                   /*tu charges toutes les adresses de tes images...*/
			}
/*pour appeler la deuxième image tu pourras faire document.monimage.src=mesimages[1].src*/
				</script>

avec biensur <img name=monimage ...>
@+

Merci

OK, merci à tous, voici mon code pour info :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Dans le onload() du fichier HTML
LoadingPictures();
MovingPictures();
 
// Là où l'on veut l'animation dans le fichier HTML
<img src="" id="_MovingPicture" />
 
// Dans le script
var images;
 
function LoadingPictures()
{
	images = new Array();
	images[0] = new Image(); images[0].src= "_0.JPG";
	images[1] = new Image(); images[1].src= "_1.JPG";
	images[2] = new Image(); images[2].src= "_2.JPG";
	images[3] = new Image(); images[3].src= "_3.JPG";
	images[4] = new Image(); images[4].src= "_4.JPG";
	images[5] = new Image(); images[5].src= "_5.JPG";
}
 
function MovingPictures()
{
	var datation = new Date();
	document.getElementById("_MovingPicture").src = images[datation.getSeconds()%6].src;
	setTimeout("MovingPictures()", 990);	
}