Vitesse d'affichage je pense

**Kalseln** · 10/01/2008, 21h35

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.

**SpaceFrog** · 11/01/2008, 08h45

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

**Kalseln** · 11/01/2008, 21h26

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 ?

**javatwister** · 12/01/2008, 09h30

ta barre de progression a quelle utilité? est-elle liée vraiment à une "progression" quelconque?

**Kalseln** · 13/01/2008, 01h03

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 ?

**SpaceFrog** · 13/01/2008, 09h24

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

**javatwister** · 13/01/2008, 11h15

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 :

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

Vitesse d'affichage je pense

JavaScript

Vue hybride

Discussions similaires

Partager

Partager