Page de chargement [Résolu]

[MayOL69bg]

Bjr,

est-il possible d'afficher un mot tel que "patientez" en attendant que la page se charge???

[Oluha]

réponse : oui

google est ton ami

[Korko Fain]

Ah bah tien j'avais répondu et mon message à été supprimé... C'est étrange de supprimer une réponse à une demande...

[MasterOfChakhaL]

Envoyé par Korko Fain

Ah bah tien j'avais répondu et mon message à été supprimé... C'est étrange de supprimer une réponse à une demande...

Il n'y a pas de messages supprimés dans cette discussion...
Es-tu sur de ne pas t'être trompé de discussion quand tu as répondu?

[MayOL69bg]

lol, ce post est possédé !!!!

sinon pour mon problème j'ai fais un bon vieux script en javascript dont voici le code si ça tente quelqu'un

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
 <!--Gestion du chargement-------------------------------------------------------------------------->
       <div id="chargement">
        <center><div id="messageChargement">Chargement en cours</div><br /></center>
        <div id="ProgressBar1" name="ProgressBar1" max="100" value="0"></div>
       </div>
                <script type="text/javascript">
                progressBar=function(progressBarNode) {
                var p=progressBarNode;
                p.input=document.createElement("input");
                p.input.type="hidden";
                p.input.name=p.getAttribute("name");
                p.layer=document.createElement("div");
                p.layer.style.backgroundColor="darkorange";
                p.layer.style.height="100%";
                p.layer.style.width="0%";
                p.appendChild(p.input);
                p.appendChild(p.layer);
                p._onchange=function() {
                    var newTaille=((this.Value()*100)/this.Max());
                    this.layer.style.width=newTaille+"%";
                    try {
                        this.OnChange();
                    } catch (ex) {}
                }
                p.OnChange=function() {
                    eval(this.getAttribute("onchange"));
                }
                p.Max=function(value) {
                    if (value || value==0) { // SET
                        this.setAttribute("max", value);
                        this._onchange();
                    } else { // GET
                        return parseInt(this.getAttribute("max"));
                    }
                }
                p.Value=function(value) {
                    if (value || value==0) { // SET
                        value=parseInt(value);
                        if (value < 0) {value=0;}
                        if (value > this.Max()) {value=this.Max();}
                        this.setAttribute("value", value);
                        this.input.setAttribute("value", value);
                        this._onchange();
                    } else { // GET
                        return parseInt(this.getAttribute("value"));
                    }
                }
                p._onchange();
                return p;
            }
            var p=progressBar(document.getElementById("ProgressBar1"));
            p.Value(10);

function afficher()
{
    document.getElementById('messageChargement').style.display = 'block';
    document.getElementById('ProgressBar1').style.display = 'block';
}
function cacher()
{
    document.getElementById('messageChargement').style.display = 'none';
    document.getElementById('ProgressBar1').style.display = 'none';
}
            </script>

pour l'afficher :

Code :

echo "<script type=\"text/javascript\">afficher();</script>";

pour le cacher :

Code :

echo "<script type=\"text/javascript\">cacher();</script>";

pour faire augmenter la progresssion de la barre :

Code :

echo "<script type=\"text/javascript\">p.Value(p.Value() + 10);</script>";

Sans oublier le style :

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
/*Gestion du chargement----------------------------------------------------------*/
#messageChargement {
	background-color: darkorange;
	border: 1px solid #000000;
	color: #fff;
	display: none;
	height: 20px;
	padding: 1em;
	width: 120px;
	text-align: center;
    vertical-align: middle;
}
#ProgressBar1 {
	border: 1px solid #000000;
	color: #fff;
	height: 15px;
	display: none;
	width: 250px;
	text-align: center;
}
#chargement{
	position: absolute;
	top: 25%;
    left:40%;
  	margin-left: auto;
	margin-top: auto;
    width:auto;
}

[Korko Fain]

Désolé alors ça doit venir de ce foutu bug qui fait que je n'arrive pas à poster du code 1 fois sur 2 sa bug :p

Donc je reprend (bah oui sa vien de me le refaire), tu cré une div disons d'une id "loading", tu lui affecte une css comme celle la :

Code :

1
2
3
4
5
6
7
#loading {
position: absolute;
z-index: 50;
width: 100%;
height: 100%;
background-color: #CCC;
}

Et tu ajoute dans ton body :

Code :

onLoad="document.getElementById('loading').style.display='none';"