Discussion :

[Niki59]

Bonjour,

J'ai un petit problème, je vous le présente :

J'ai 98 images à afficher sur ma page.
Seulement, le temps de chargement peu paraître long pour certaines connexion bas débit.

Serait-il possible de mettre un message ou une image de chargement en attendant que les 98 images finissent toutes de se charger ?

Merci à vous!

[le_chomeur]

mieux , une image de load sur chaque image , et afficher l'image une fois chargée

[SpaceFrog]

j'ai déja fait ce genre de chose ...

perso j'ai traité ça en testant dans un setInterval le complete de toutes les images

on prend une variable flag que l'on mets à 0 en debut de boucle
puis on boucle sur la collection document.images
on teste le complete de chaque image et si il est true on incrémente le flag
à la fin de la boucle on teste si le flag vaut au length de document.images
On ajoute éventuellement un nombre max de boucle pour ne pas bloque la page

[Niki59]

Merci le chomeur pour l'indication, mais l'idée de SpaceFrog me tente plus.

SpaceFrog > J'essaye de créer ce que tu m'a dit, j'éditerais le topic à l'avenir pour présenter ce que j'ai fait, et voir éventuellement ensemble ce qui n'ira pas.

EDIT :
Voici ce que cela donne, et je suis un peu bloqué pour te dire :

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
var flag = 0;
 
function load()
{
	var listImg = document.images;
 
	for(var i = 0; i < listImg.length; i++) 
	{
		if(document.images[i].complete) flag += 1;
	}
 
	if (flag == listImg.length) /* je fait quoi maintenant ?? */
}
 
setInterval("load()", 500);

[SpaceFrog]

tu oeux par exemple au debut du lancement du setInterval rendre un div visible aves un pourcentage de chargement

flag/images.length*100

une fois le ration=100% tu fais un clearInterval et tu masqus le div

[Bovino]

perso j'ai traité ça en testant dans un setInterval le complete de toutes les images

on prend une variable flag que l'on mets à 0 en debut de boucle
puis on boucle sur la collection document.images
on teste le complete de chaque image et si il est true on incrémente le flag
à la fin de la boucle on teste si le flag vaut au length de document.images
On ajoute éventuellement un nombre max de boucle pour ne pas bloque la page

Ce serait pas plus efficace d'incrémenter ton flag sur le onload ou oncomplete de chaque image et de ne tester que la valeur du flag dans le setInterval ?

[SpaceFrog]

le set interval est lancé sur le onload
le flag est donc incrémenté et testé à la fin de chaque itération

[Bovino]

Oui, j'avais bien compris ça ! Donc à chaque itération du setInterval, tu passes en revue toute la collection Images du document, ce qui peut être un peu lourd. Ce que je propose, c'est d'incrémenter le flag sur le onload de chaque image :

Code html :

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

<img src="image.jpg" alt="image" onload="flag++" />

comme ça, ton setInterval (lancé lui sur le onload de la page, n'aura qu'à tester la valeur d'une variable :

Code :

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

1
2
3
4
5
function check(){
    if(flag==98){
        document.getElementById('overlay').style.display = 'none';
    }
}