Une image de chargement pour un lot d'image en chargement.

**Niki59** · 05/06/2009, 09h46

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** · 05/06/2009, 10h05

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

**SpaceFrog** · 05/06/2009, 10h14

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** · 05/06/2009, 10h23

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** · 05/06/2009, 13h17

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** · 05/06/2009, 13h20

Envoyé par SpaceFrog

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** · 05/06/2009, 14h08

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

**Bovino** · 05/06/2009, 16h45

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

**SpaceFrog** · 05/06/2009, 16h56

oui sauf q'une balise image n'as pas d'attribut onload de façon stricte

**Bovino** · 05/06/2009, 20h33

Ben si justement...

Code html :

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

1
2
3
4
5
6
7
8
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="test.jpg" alt="test" onload="alert('toto')" />
</body>
</html>

affiche bien toto

Voir ici

**SpaceFrog** · 05/06/2009, 20h40

ha oui tiens ...
j'etais resté au onload uniquement sur le body
ceci etant ça ne cahnge pas grand chose il faut tout de même faire un incrément dans un setTimout
a la limite faire un push dans un array sur le onload de chaque image
et tester le array length dasn un setInterval et faire un clearInterval quand le compte est bon

**Bovino** · 05/06/2009, 20h56

Code php :

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
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var flag = 0, nb_img, timer;
function init(){
	nb_img = document.images.length;
	timer = setInterval(function(){verif()},500);
}
function verif(){
	if(flag==nb_img){
		clearInterval(timer);
		alert('OK, toutes les images sont chargées !');
	}
}
</script>
</head>
<body>
<?php
	for($i=0; $i<100; $i++){
		echo'<img src="test'.$i.'.jpg" alt="test" onload="flag++" />'
	}
?>
</body>
</html>

ça peut le faire en testant uniquement un entier

**SpaceFrog** · 05/06/2009, 21h11

oui j'etais parti sur un push histoire de pouvoir eventuellement retracer les images chargée ou non

**nod__** · 05/06/2009, 21h16

Le truc du onload sur les images c'était une bonne idée non ? Je vois pas en quoi le setInterval est utile, rien ne change entre le chargement des images donc :

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
<html>
<head>
<title>Test</title>
</head>
<body>
<?php
        for($i=0; $i<100; $i++){
                echo'<img src="test'.$i.'.jpg" alt="test" onload="verif()" />'
        }
?>
 
 
<script type="text/javascript">
var flag = 0,
    nb_img = document.images.length;
 
function verif () {
        flag++;
	if (flag === nb_img) {
		alert('OK, toutes les images sont chargées !');
	}
}
</script>
</body>
</html>

**SpaceFrog** · 05/06/2009, 21h57

je serais curieux de voir comment tu comptes le faire fonctionner sans setInterval ...

**nod__** · 05/06/2009, 22h22

Là par exemple, tu prends le code tu rajoutes des <img> et «ça marche™».

Je dirais même plus, tant qu'a faire du JS autant y aller a fond :

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
28
29
30
<html>
<head>
<title>Test</title>
</head>
<body>
 
 
    <img src="http://www.decitre.fr/gi/41/9782012248441FS.gif">
    <img src="http://missdiablounette.m.i.pic.centerblog.net/37rriuxb.jpg">
    <img src="http://www.developpez.net/forums/images/logo16.gif">
 
 
<script type="text/javascript">
var flag = 0,
    nb_img = document.images.length;
 
for (var i=0;i < nb_img;i++) {
    document.images[i].onload = verif;
}
 
function verif () {
    flag++;
    if (flag === nb_img) {
        alert('OK');
    }
}
 
</script>
</body>
</html>

**SpaceFrog** · 05/06/2009, 22h56

En cas d'echec de chargement d'une image que se passe-t-il ?

**nod__** · 05/06/2009, 23h31

Hé bien il se passe la même chose que pour le code de Bovino, le setInterval() qui tourne à l'infini en moins.

( edit ) et pour le coup ça devient trivial de rajouter une fonction pour gérer les erreurs justement :

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, errors = 0,
    nb_img = document.images.length;
 
for (var i=0; i < nb_img; i++) {
    document.images[i].onerror = function () {
        errors++;
        this.parentNode.removeChild(this); // ou n'importe quoi
    };
    document.images[i].onload = function () {
        flag++;
        if ((flag + errors) === nb_img) {
            alert("OK. "+ (errors === 0 ? "" : errors+" erreurs"));
        }
    };
}

( edit² ) si la dernière image se charge pas c'est pas glop :

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
var flag = 0, errors = 0,
    nb_img = document.images.length;
 
function verif () {
    if ((flag + errors) === nb_img) {
        alert("OK. "+ (errors === 0 ? "" : errors+" erreurs"));
    }
}
 
 
for (var i=0; i < nb_img; i++) {
    document.images[i].onerror = function () {
        errors++;
        verif();
        this.parentNode.removeChild(this); // ou n'importe quoi
    };
    document.images[i].onload = function () {
        flag++;
        verif();
    };
}

**SpaceFrog** · 06/06/2009, 12h48

oui dans la solution setIntervl il suffit d'ajouter un nombre maximal d'ittérations ... ce qui revient à definir un temps maximum d'attente
les deux solutions sont viables.

On peut dans les deux cas afficher un pourcentage d'images chargées
le setInterval reste pour moi plus vivant, la solution du onload des images ne declenchant la fonction que le nombre fr fois qu'il y a d'images.
le setInterval permet un declenchement plus fréquent..
Tout depend ensuite des operations que l'on a besoin d'effecuer pendant le chargement

**nod__** · 06/06/2009, 13h03

bah ouais, on peut toujours rajouter des trucs pour que ça marche. Même sans faire gaffe (comme la plupart des gens quand ils font du js…) y'a pas de danger que je me retrouve dans une boucle infinie.

Je veux bien que ça marche mais franchement une méthode où il faut faire attention à ne pas tomber dans un boucle infinie pour un pauvre chargement d'images où il n'y a même pas de récursion, il y a clairement un problème.

Après c'est au créateur du post de voir ce qui lui plaît le plus. Pour moi le js c'est événementiel, alors j'utilise les évènements. Chacun son truc

( edit ) le pourcentage ne bougera pas tant qu'une nouvelle image n'est pas chargée. Chargée/Erreur, on a pas plus fin. «Vivant» c'est pas raffraichir un % à la même valeur plusieurs fois par seconde.

Une image de chargement pour un lot d'image en chargement.

JavaScript

Discussions similaires

Partager

Partager