Vitesse d'affichage je pense

Version imprimable

10/01/2008, 21h35
Kalseln

Vitesse d'affichage je pense

Bonjour,
j'ai récupéré un code javascript pour afficher une barre de progression. La barre est en fait une div que est agrandie en largeur.
J'ai un peu modifié ce code pour l'adapter à mes besoins.
Dans le cas le plus rapide, le code agrandit la barre d'un pixel trois fois par dizième de seconde environ, enfin devrait car cela est à peu près deux fois moins rapide que cela devrait. Or si je ralentis la progression en faisant progresser la barre de trois pixels en un seul coup par dizième de seconde, le timing est bon.

Du coup je me demande si avec trois rafraîchissement par dizième de seconde je ne dépasse pas les limites d'une fréquence de rafraîchissement, ou quelque chose du style : ce ne doit pas être le javascript, je pense plutot aux capacités des navigateurs.
Quelqu'un peut-il m'éclairer à ce sujet ?

Peut-être que je me suis trompé d'endroit pour poster.:(
11/01/2008, 08h45
SpaceFrog

Je pense en effet que cela peut provenir de la vittesse de rafraichissement et éventuelement d'autre opérations que tu demandreais au script de faire...

Il faudrait fair eun benchmark avec d'un coté un settInterval qui modifie la largeur et de l'autre un setInterval qui recupère le offsetWidth...

La solution:

à ce moment là conserve la fréquence mais augmente l'agrandissement

au lieu de 1 pixel tous les 33 centièmes de seconde il suffit de faire
3 pixels tous les dizièmes de secondes...
11/01/2008, 21h26
Kalseln

Oui c'est ce que j'ai fait pour tester mais la barre progresse par à-coup et je préfère quand c'est bien fluide.
Je vais peut être faire 2 vitesse de progression de la barre : une pour les progressions rapides et l'autre pour les progressions plus lentes.

Euh sinon je ne connais pas setIntervalle, est-ce que c'est mieux en performance qu'un setTimeout récursif ?
12/01/2008, 09h30
javatwister

ta barre de progression a quelle utilité? est-elle liée vraiment à une "progression" quelconque?
13/01/2008, 01h03
Kalseln

Non là c'est juste pour faire joli pendant un compte à rebours, mais il est possible que je me serve de cette barre plus tard pour un upload ; ça change quelque chose ?
13/01/2008, 09h24
SpaceFrog

vu que javascript ne peut pas capter une progression d'upload ....

et pourquoi ne pas jouer le jeu de la "barre de progression" standard, avec avancement visible?

charge l'exemple, si tu veux (j'ai mis delai à 1 seconde mais on peut évidemment accélérer au maximum);

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
 
<style type="text/css">
 
 
#cadre {
	width:300px;
	margin:auto;
	padding:30px;
	text-align:center;
	border:ridge 5px
}
 
#compt {
	font-weight:bold;
	font-size:25px;
}
 
#b {
	margin:20px auto 20px auto;
	border:2px solid #000000;
	font-size:0px;
	height:12px;
	width:242px;
}
 
 
.sp {
	background-color:lime;
	width:10px;
	height:10px;
	font-size:0px;
	margin:1px 2px 1px 0px;
	float:left
}
 
</style>
 
</head>
 
 
<body>
 
 
 
 
<script type="text/javascript">			
 
var sp, t=0, delai=1000;
 
function go(){
 
	if(t<20){
		t++;
		sp=document.createElement("div");
		sp.className="sp";	
		document.getElementById("b").appendChild(sp);
		document.getElementById("compt").firstChild.data=20-t;
		setTimeout("go()",delai)
	}
}
 
 
 
</script>
 
<div id="cadre">
	<div id="compt">20</div>
	<div id="b"></div>
	<input type="button" value="go" onclick="go()" />
</div>
 
 
</body>
</html>

13/01/2008, 20h26
Kalseln

Merci pour ton code javatwister, ça m'ouvre des perspectives intéressantes.

Pour l'upload j'imagine que ça doit être faisable avec AJAX (que je ne connais absolument pas) mais je ne vais pas me pencher sur cette question maintenant j'ai pas mal de choses à voir avant.
13/01/2008, 20h42
SpaceFrog

avec ajax on peut en effet par l'intermédiare de php ou asp par exemple récupérer une notion de quantité qui permet de faire avancer une barre de progression