[Javascript] Comment afficher un message chargement en cours patientez ?

Version imprimable

25/03/2006, 03h04
loady

[Javascript] Comment afficher un message chargement en cours patientez ?

Bonjour,

Voila, j'ai sur une page un fichier qui est assez long à monter et je voudrais afficher un petit message d'attente sur la page genre "chargement de la page patientez .... " et qui disparait dès que la page s'affiche. Commment puis je faire ca ? :roll:
25/03/2006, 04h10
Kerod

Avec du Js ca devrait pouvoir faire l'affaire, non ?!*
J'avais fait un truc comme ca ou je cachait avec un div qui contenait mon message et le reste de la page en hidden...Et après un certain temps je désactivais mon message et remettait la propriété à visible.

Mon bon peut etre qu'il y a plus simple :roll:
25/03/2006, 09h18
macbook

Ou bien en ajax puisqu'on ne peut le faire qu'en javascript : tant que readyState est inférieur à 4 tu affiche 'Chargement...'.
25/03/2006, 23h10
loady

Hello,

Merci pour votre réponse, mai vous auriez pas un exemple concret en javacript ou ajax ? J'avoue que je vois pas bien.

Merci 8O

Salut,

voici un exemple qui marche bien :D

Le code à mettre juste après ta balise <BODY>

Code:

1
2
3
4
5
6
7
8
9
10
 
<div id="waitDiv" style="position:absolute;left:432;top:276;visibility:hidden">
<center><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif" size="3"><b>Page en cours de chargement...</b></font><P>
<font size="2">Merci de patienter</font><br><img src="./images/polling2.gif"</center></div> 
<SCRIPT> <!-- 
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name) { if (document.getElementById) { return document.getElementById(name).style; } else if (document.all) { return document.all[name].style;
} else if (document.layers) { return document.layers[name]; } } function ap_showWaitMessage(div,flag) { if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById) if(document.layers) x.left=280/2; return true; } ap_showWaitMessage('waitDiv', 1); 
//--> </SCRIPT>

Le code à mettre juste avant ta balise </BODY>

Code:

1
2
3
4
 
<SCRIPT language="javascript"> <!-- 
ap_showWaitMessage('waitDiv', 0);
//--> </SCRIPT>

Pour bien te former: Cours et tutoriels pour apprendre JavaScript

27/03/2006, 04h38
loady

MERCI a tous et speciale dedicace pour STEPH1 8)

Citation:

Envoyé par steph1

Salut,

voici un exemple qui marche bien :D

Le code à mettre juste après ta balise <BODY>

Code:

1
2
3
4
5
6
7
8
9
10
 
<div id="waitDiv" style="position:absolute;left:432;top:276;visibility:hidden">
<center><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif" size="3"><b>Page en cours de chargement...</b></font><P>
<font size="2">Merci de patienter</font><br><img src="./images/polling2.gif"</center></div> 
<SCRIPT> <!-- 
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name) { if (document.getElementById) { return document.getElementById(name).style; } else if (document.all) { return document.all[name].style;
} else if (document.layers) { return document.layers[name]; } } function ap_showWaitMessage(div,flag) { if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById) if(document.layers) x.left=280/2; return true; } ap_showWaitMessage('waitDiv', 1); 
//--> </SCRIPT>

Le code à mettre juste avant ta balise </BODY>

Code:

1
2
3
4
 
<SCRIPT language="javascript"> <!-- 
ap_showWaitMessage('waitDiv', 0);
//--> </SCRIPT>

Bonsoir je vient de tester ce script mais lorsque la page a fini de charger le texte reste en fond d'écran au lieu de disparaître.

Quelqu'un a t'il une solution ?

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 
onload=function(){
document.body.removeChild(document.getElementById("mess"));
 
</script>
 
<body>
   <h1 id="mess">
      Veuillez patienter...
   </h1>

17/02/2008, 11h24
kilian67

Merci javatwister le message s'affiche bien mais reste a l'écran malgré la fin du chargement de la page !
17/02/2008, 11h44
javatwister

étonnant, si tu lui donnes bien l'id "mess" et que ton document est composé normalement;
tu peux me montrer le code correspondant dans ta page?

C'est a peut pres ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<html><head><script type="text/javascript">
 
onload=function(){
document.body.removeChild(document.getElementById("mess"));
 
</script>
</head>
<body bgcolor="#CCCCCC" text="black" link="#3399FF" vlink="#3399FF" alink="#3399FF">
<h1 id="mess">
      Veuillez patienter...
   </h1>

ah ben j'ai mis de crochet de fin de fonction :mrgreen::mrgreen:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
 
onload=function(){
   document.body.removeChild(document.getElementById("mess"));
}
 
</script>
 
<body>
   <h1 id="mess">
      Veuillez patienter...
   </h1>

17/02/2008, 13h53
kilian67

:merci: Merci javatwister ça fonctionne à merveille maintenant.
De plus ton code est bien plus simple (et moins long) que tous ceux que j'ai déjà tester jusqu'à maintenant. :king: