recherche bidouille pour "barre de chargement"

Version imprimable

24/10/2005, 09h55
SpaceFrog

recherche bidouille pour "barre de chargement"

je suis vraiment sur le toute fin de mon catalogue usine à gaz ...

pour ceux qui veulent il y a des slips en non tissé en vente ... :lol:

bon plus sérieusement, lorsque l'on clique sur une rubrique du catalogue, je lance un xmlhttprequest et une routine javascript construit la page dynamiquement... pendant ce temp un div "veuillez patienter apparait" ...
j'aimerais y rajouter un pourcentage car des fois c'est un peu long et on peut avoir l'impression que ça a planté.... sachant que j'ai une boucle qui teste le complete des document.images avant d'afficher la page produits ...

un premier essai de calcul d'un pourcentage des images complete par rapport au document.images.length ne me donne pas entière satisfaction car dans les premières secondes il me met invariablement 100% puis incrémente correctement... je n'ai pas réussi à trouver d'ou cela pouvait venir ...
sans doute que le document.images.length n'est pas au début égale à la totalité des images ?

auriez vous une idée pour coller une barre de progression ou un pourcentage incrémental dans le message d'attente...

le site est en ligne ici
27/10/2005, 10h04
SpaceFrog

je n'inspire même pas Javatwister ?
Mon cas serait-il désespéré ?
27/10/2005, 10h31
Mr N.

Citation:

Envoyé par SpaceFrog

Sujet du message: recherche bidouille pour "barre de chargement"

J'ai retrouvé Bidouille :
http://www.developpez.net/forums/pro...rofile&u=15192

Mais pour ton site, je vois pas de barre de pourcentage/progression...
27/10/2005, 11h15
javatwister

eh bien oui: Javatwister fait la sourde oreille car il lui est impossible de donner satisfaction à SpaceFrog;

il le regrette et lui souhaite néanmoins un bon jeudi :P
27/10/2005, 11h36
SpaceFrog

yes MR N normal je n'ai pas mis de barre de défilement ni de pourcentage incrémantal parceque ça ne marche pas ...

le principe était de calculer le ratio entre images du document et images complete ...
mais il semble que ce ne soit pas fiable ... en effet il commence par me mettre 100% ...

pour JT merci de ta compassion ;)
27/10/2005, 11h44
javatwister

ce que je saisis mal c'est comment tu t'y prends pour estimer le poids total du matériel à charger et la proportion déjà chargée!

si t'as vraiment une combine, vends-la-moi s'il te plaît 8)
27/10/2005, 12h09
denisC

Citation:

Envoyé par javatwister

ce que je saisis mal c'est comment tu t'y prends pour estimer le poids total du matériel à charger et la proportion déjà chargée!

Il compare le nombre d'images de la page et le nombre d'images chargées sur la page.

Le problème, c'est qu'initiallement, il n'y a pas d'images sur la page (normal, il n'y a pas de page). D'ou sa cafouille...

Pour la grenouille, je ne vois pas comment tu pourrais faire. Ta bidouille me semble sensée (surtout si tu as bcp d'images, comme ça semble être le cas sur ton catalogue). Donc, tout ce que je peux te conseiller, c'est que tant que document.images.length est à 0, tu laisses à 0% de chargement de la page, et ensuite tu utilises ton truc.
C'est un peu des % Micro$ mais bon :lol:

Si tu trouves mieux, ça m'interesse aussi :)
27/10/2005, 12h11
SpaceFrog

en fait je crée en fin de boucle de création dynamique d'objet un element bidon avec un id ="finished" ... je teste dans un setInterval si cet element existe ...
lorsqu'il existe cela devrait vouloir dire que tous les autres éléments du documents créés auparavant existent...
et donc que toutes les img du document existent...
je teste donc dans une boucle de i=0 à i=document.images.length si toutes les images sont complete si elle ne sont pas complete j'affiche le ratio images.complete/document.images qui est supposé donner le pourcentage de chargement des images ...

mon souci est qu'au début de la boucle de calcul du ration il retourne 100% ???
27/10/2005, 12h23
javatwister

un souci est de savoir si une image dont la prop complete est à false est considérée dans le tableau document.images
27/10/2005, 12h24
denisC

Citation:

Envoyé par SpaceFrog

mon souci est qu'au début de la boucle de calcul du ration il retourne 100% ???

Typiquement document.images.length n'a pas la bonne valeur (0 ou autre chose...)
27/10/2005, 12h31
javatwister

tu ne pourrais pas plutôt splitter le nombre d'éléments "img" (donc,a priori, le nombre d'articles) pour obtenir un total et à chaque chargement indiquer "chargement: 1 image sur 10 ... chargement: 2 images sur 10..."

enfantin :mrgreen:

Si je fais un alert(document.images.length); dans le <head>, il m'affiche bien 0 (sous Fx en tout cas)
Et le code suivant marche impeccable meme s'il n'est pas optimisé :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
	<style type="text/css">
	#preloading {
		background:red;
		position:relative;
		height:20px;
		width:500px;
	}
	#progress {
		background:green;
		position:absolute;
		top:0px;
		left:0px;
		height:20px;
		width:0px;
	}
	</style>
	<script type="text/javascript">
		setInterval(function() {
			width              = document.getElementById('preloading').offsetWidth;
			nb_images          = document.images.length;
			nb_images_complete = 0;
			for(i = 0 ; i < nb_images ; i++) {
				if (document.images[i].complete) {
					nb_images_complete++;
				}
			}
			document.getElementById('progress').style.width = ((nb_images_complete*width)/nb_images)+'px';
		}, 100);
	</script>
</head>
<body>
    <div id="preloading"><div id="progress"></div></div>
    <img src="http://www.lefinnois.net/fond_pov/1280/chose_bulles.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_blanc_bleu.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_orange.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_rouge.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_vert.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_violet.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/bague.png" />
    <img src="http://www.lefinnois.net/fond_pov/1600/bague_builing.png" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png" />
    <img src="http://www.lefinnois.net/fond_pov/1280/boule-orange.png" />
</body>
</html>

27/10/2005, 12h37
Mr N.

Il fauit bien sur mixer avec la bidouille qui consiste à tester la presence d'un element pour etre sur que document.imafges.length = nb voulu...
27/10/2005, 12h42
SpaceFrog

JT => qu'entends tu par splitter ... le innerHTML du body ou un getElementsByTagName ?

tiens, une idée toute bête et jolie, en reprenant les images de Mr N.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
</head> 
 
<body> 
 
<div id="tot">...</div>
 
<div id="c">
    <img src="http://www.lefinnois.net/fond_pov/1280/chose_bulles.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_blanc_bleu.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_orange.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_rouge.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_vert.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/aqua_violet.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/bague.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1600/bague_builing.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png" /> 
    <img src="http://www.lefinnois.net/fond_pov/1280/boule-orange.png" /> 
</div>
 
<script type="text/javascript"> 
var im=document.getElementsByTagName('img');
var ch=0;
 
	for(i=0;i<im.length;i++){
		im[i].onload=function(){
			ch++;
			document.getElementById("tot").firstChild.data="chargement: " + ch + " images sur " + im.length;
		};
	}
 
</script> 
 
</body> 
</html>

le test est ici effectué au premier chargement de la page mais rien n'interdit de le lancer dans une fonction quand tu fais ta requête;

En integrant l'astuce de SpaceFrog :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
	<style type="text/css">
	#preloading {
		background:red;
		position:relative;
		height:20px;
		width:500px;
	}
	#progress {
		background:green;
		position:absolute;
		top:0px;
		left:0px;
		height:20px;
		width:0px;
	}
	</style>
	<script type="text/javascript">
		setInterval(function() {
			if (document.getElementById('fin')) {
				width              = document.getElementById('preloading').offsetWidth;
				nb_images          = document.images.length;
				nb_images_complete = 0;
				for(i = 0 ; i < nb_images ; i++) {
					if (document.images[i].complete) {
						nb_images_complete++;
					}
				}
				document.getElementById('progress').style.width = ((nb_images_complete*width)/nb_images)+'px';
			}
		}, 100);
	</script>
</head>
<body>
    <div id="preloading"><div id="progress"></div></div>
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=00" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=01" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=02" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=03" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=04" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=05" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=06" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=07" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=08" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=09" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=10" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=11" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=12" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=13" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=14" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=15" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=16" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=17" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=18" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=19" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=20" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=21" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=22" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=23" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=24" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=25" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=26" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=27" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=28" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=29" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=30" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=31" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=32" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=33" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=34" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=35" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=36" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=37" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=38" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=39" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=40" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=41" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=42" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=43" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=44" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=45" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=46" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=47" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=48" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=49" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=50" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=51" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=52" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=53" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=54" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=55" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=56" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=57" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=58" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=59" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=60" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=61" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=62" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=63" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=64" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=65" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=66" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=67" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=68" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=69" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=70" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=71" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=72" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=73" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=74" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=75" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=76" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=77" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=78" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=79" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=80" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=81" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=82" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=83" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=84" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=85" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=86" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=87" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=88" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=89" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=90" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=91" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=92" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=93" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=94" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=95" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=96" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=97" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=98" width="10" height="10" />
    <img src="http://www.lefinnois.net/fond_pov/1280/newpenta.png?a=99" width="10" height="10" />
    <div id="fin"></div>
</body>
</html>

Pour moi : ce script fait ce que tu voudrais Space... non ?

27/10/2005, 15h37
SpaceFrog

c'est tout à fait dans l'esprit de ce que j'avais fait au départ et de ce que j'ai remis en ligne , mais j'ai beau réinitialiser le percentloaded à 0 il me ressort toujours 100% au départ ???
27/10/2005, 15h46
SpaceFrog

ça y'est c'est bon ! je ne réinitialisais pas au bon endroit ...

a priori le pourcentage à l'air bon ...

merci de votre aide, j'avais l'idée mais pas exactement la mise en oeuvre ...

pour JT=> en fait le pourcenatge ne représente pas une taille d'image mais une proportion des images chargées ...
ici elles ont toutes plus ou moins la même taille mais il est vrai que ce compteur ne serait pas représentatif pour des écrats de tailles trop importants ...