Discussion :

[SpaceFrog]

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


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

[SpaceFrog]

je n'inspire même pas Javatwister ?
Mon cas serait-il désespéré ?

[Mr N.]

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

[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

[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

[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)

[denisC]

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

Si tu trouves mieux, ça m'interesse aussi

[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% ???

[javatwister]

un souci est de savoir si une image dont la prop complete est à false est considérée dans le tableau document.images

[denisC]

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...)

[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

[Mr N.]

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 :

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
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>

[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...

[SpaceFrog]

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

[javatwister]

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

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

[Mr N.]

En integrant l'astuce de SpaceFrog :

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
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 ?

[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 ???

[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 ...