Discussion :

[kharon]

Bonjour, j'ai une page avec une 15aine d'images a afficher. Je me suis donc tout d'abord penché vers des scripts de preload. Le probleme est que toutes les images se chargent en même temps et que ma page est remplie d'animations d'attentes... J'aurai donc aimé charger la première image et l'afficher, charger la deuxième image et l'afficher, ainsi de suite. Avec mon niveau de super débutant, je ne m'en sort pas trop.

Voila à peu près où j'en suis. Mon script commence par appeler la 1ere image avec un : document.write('l-image-que-je-veux-afficher.jpg')

Ensuite, Pour ne pas que les autres images commencent à se charger, j'ai crée une fonction qui, tant que l'image n'est pas completement chargée, ne fait que des pauses et qui s'appele elle même. La voici (l'image en question s'appele image01):

function verifimage01() {
// si l'image n'est pas encore chargée
if(document.images.image01.complete == false) {

// faire une pause de 500ms et relancer la fonction
setTimeout('verifimage01()',500)

}
}


Une fois que l'image est chargée, je continu mon script en écrivant une nouvelle image avec un "document.write()", et je reprend le même manege... Le probleme est qu'apparament, ça ne marche pas tres bien, parfois on dirait que le javascript abandonne...

Si vous voulez jetter un coup d'oeil à : ma page

Deux remarques :
C'est volontairement lourd à charger. En effet, afin de voir comment se comporte le tout, j'ai volontairement gardé des images assez lourdes car ma connexion est trop rapide (je vide le cache a chaque fois, mais ça va vite). J'optimiserai le poids de mes images une fois mon script OK.

J'ai crée une fonction de verification par image ( verifimage01(), verifimage02(), verifimage03(),... J'aurai pu faire une seule fonction qui vérifie une image dont le nom est indiqué en argument, mais je suis trop mauvais pour réussir a passer un argument dans une fonction...

Donc si vous pouvez m'aider à optimiser le chargement de ces images, c'est cool

Merci de votre aide, K

[cerede2000]

Bon alors deja il faut que tu sache que tu possede par default en JS d'un tableau qui contient toute les image de ta page, et ensuite pourquoi ne tout simplement pas passe par une boucle meme deux, une qui boucle sur les images avec un for par exemple et ensuite dans le for une boucle while qui attent que l'image soit chargé

[kharon]

Salut cerede merci pour ta reponse rapide, pourrais tu un peu plus developper ton idée ? En effet, car je crois que tu as un peu surestimé mes capacités

Pour le While, je suppose que tu l'utiliserai de la maniere suivante

// appeler l'image
document.write('<img src="01.jpg" border="0" name="image01"><br>');

// Tant que cette image n'est pas chargée
while (document.images.image01.complete == false)

// faire une pause de 500ms
???? là je seche, j'ai bien tenté de mettre un fonction bidon car apparament il est impossible de faire une pause en javascript
{
setTimeout('1+1' ,500) ;
}

Et mon logiciel freeze...



Au niveau du "For", je pense que je vais m'en sortir mais pour le while, c'est pas gagné. Dans ta réponse, tu fais mention d'un tableau des images, a quoi peut-il me servir ?

Encore merci, K

[cerede2000]

Bon alors je ferais quelque chose de ce style.
Ca donnerai quelque chose du style:
le tableau d'image est celui ci:

Code :

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

document.images[]

Donc en disant que ta premiere image soit la 10 et la derniere la 15 tu a donc 5 images.

Code :

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

1
2
3
4
5
 
for(i = 0 ; i < 4 ; i++) {
    document.write('<img src="img' + i + '.jpg" alt="" />');
    while(document.images['img' + i].complete == false);
}

Quelque chose comme ca en sachant que la tu n'as pas besion de settimeout, ou de setinterval, et qu'il faut que tes images soit nomées img0, img1...

[cerede2000]

Mais bon je sait ce qu'on va me dire que ca ne vas pas parceque a parement faire une boucle while comme ceci bloquerai le navigateur.
Donc solution 2 utiliser le settimeout qui je le precise dans sa premiere partie doit contenir une fonction a relancé tu a mit '1+1'...

[cerede2000]

Bon alors j'ai tester ceci qui fonctionne ca devrai t'eclairé

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
image = new Image();
function recharg(img) {
	image.src = "http://www.astro.umontreal.ca/centre/poster/pos7/image001.png";
	verif();
}
function verif() {
	if(image.complete) {
		alert("chargé");
	}
	else
		setTimeout("verif()", 200)
}

A la fin du chargement de l'image on a le message "chargé"

Edit: Voici pour un tableau d'image

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
 
tabimg = new Array();
function recharg() {
	for (i = 0 ; i < document.images.length ; i++) {
		tabimg[i].src = "img.php?action=affich&time=" + (new Date()).getTime()+i;
		document.images[i].src = "spin.gif";
	}
	verif();
}
function verif() {
	for (i = 0 ; i < tabimg.length ; i++) {
		if(tabimg[i].complete)
			document.images[i].src = tabimg[i].src;
		else
	setTimeout("verif()", 500)
	}
}
function ajoutimg() {
	tabimg.push(new Image());
	tabimg[document.images.length].src = "img.php?action=affich&time=" + (new Date()).getTime();
	document.getElementById("images").innerHTML += '<img src="img.php?action=affich&time="' + (new Date()).getTime() + ' border="0" alt=""/><br/>';
}

Bon moi c'est un code pour une image de validation, la fonction ajoutimg ajoute une image dans la page je l'utilise avec un bouton pour faire des tests a toi d'adapter
Ensuite il faudra que tu adapte egalement pour utiliser la fonction recharg au chargement de ta page (ca c'est simple ) et voila...