Discussion :

[benoitB]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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

[Sheriff]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...>
@+

[benoitB]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);	
}