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

**droliprane** · 12/07/2014, 17h07

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 :

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

**NoSmoking** · 13/07/2014, 19h04

Bonjour,
il faut laisser le temps au moteur de rendu de prendre la main pour redessiner la page, cela passe par l'utilisation de la méthode setTimeout par exemple.

On peut quand même s'interroger sur l'utilité d'un tel affichage attendu que cela est déclanché sur l'événement onload et que ce qui se passe après le chargement de la page n’intéresse pas forcément l'internaute qui n'a qu'une hâte c'est de dévorer ta page.

On utilise en règle général ce genre de preload des images pour être discret justement.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager