Progressbar qui ne s'affiche qu'une fois à 100%

Bonjour,

je suis en train de monter un petit site dans lequel je voudrais que toutes les images de mon interface soient préchargées au loading de ma page d'accueil, avec une petite barre de progression.

Voici le code de ma page index (je récupère les images à charger dans un tableau Js que j'alimente côté serveur via asp, mais bon ça ça fonctionne) :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		body{
			overflow : hidden;
			background-color : 'black';
			color:red;
		}
 
		#progressbar {
			background: -ms-linear-gradient(rgb(206, 220, 231) 0%, rgb(89, 106, 114) 100%); border: 1px solid rgb(0, 0, 0); width: 98%; height: 25px; overflow: hidden;
		}
		#barre {
			background: -ms-linear-gradient(rgb(214, 89, 70) 0%, rgb(203, 75, 47) 40%, rgb(160, 35, 0) 56%, rgb(227, 81, 33) 100%); width: 0%; height: 25px; border-right-color: rgb(0, 0, 0); border-right-width: 1px; border-right-style: solid;
		}
		#pourcentage {
			left: 47%; top: -21px; color: rgb(0, 0, 0); font-size: 20px; font-style: italic; font-weight: bold; position: relative;
		}
 
	</style>
	<script language="javascript">
 
	var tab = new Array();
	var images = new Array();
	<%
	' lecture du dossier images
	Dim root, objFSO, objFile, objFolder
 
	root = "http://localhost/monsite/images/"
	Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
	Set objFolder=objFSO.GetFolder(Server.MapPath("./images"))
 
	i = 0
	For Each objFile in objFolder.Files
		Response.Write "tab[" & i & "] = '" & root & objFile.Name & "';" & VbCrLf
		i = i + 1
	Next
 
	Set objFolder = Nothing
	Set objFSO = Nothing
 
	%>
	var nb = tab.length;
 
	function preload() {
 
		for (i = 0; i < nb; i++) {
			images[i] = new Image();
			images[i].src = tab[i];
 
			progression((i+1), nb)
 
		}
 
		alert('terminé');
	}
 
	function progression(i, max){
 
		var v = Math.round((i*100)/max);
		document.getElementById("barre").style.width= v+"%";
		document.getElementById("pourcentage").innerHTML=v+"%";
 
	}
 
	</script>
</head>
<body onload="preload();">
 
<table border=0 width="100%" height="100%">
<tr>
	<td align="center" vAlign="middle">
		<table border=0>
		<tr>
			<td>
				<img src="images/logo3.png"/>
			</td>
		</tr>
		<tr>
			<td height="50" style="padding-left: 8px;">
 
				<div id="progressbar">
				    <div id="barre">
				    </div>
				    <div id="pourcentage">
				    </div>
				</div>
 
			</td>
		</tr>
		</table>
	</td>
</tr>
</table>
</body>
</html>

et donc ce qui se passe c'est que j'ai le message "terminé" et en même temps ma progressbar à 100%, je n'ai pas vu la progression...

J'ai essayé sur mon serveur hébergé, avec des images un peu lourdes (quelques centaines de kilos chacune), et ça fait pareil. J'attends quelques secondes...... et 100%

Est-ce qu'il y aurait une instruction pour indiquer à Js qu'il peut envoyer ses commandes au navigateur au fur et à mesure, une espèce de flush() comme en asp ?

Sinon voyez-vous pourquoi ça se comporte comme ça ?

Merci