Chargement d'une page web utilisant de l'AJAX/HTML/PHP

**CrazySeb** · 08/06/2007, 10h53

Bonjour,

J'ai réalisé une page réalisant un chargement qui prend un peu de temps. J'aimerais afficher un message disant => chargement de la page, veillez patienter. En cherchant sur le web, je n'ai eut aucun mal à en trouver.
Malheureusement, le texte ne s'affiche qu'après que je traitement PHP/AJAX soit finie. Ainsi, j'ai une page blanche pendant 5/6 secondes, puis le messages disant de patientez pendant 1/10 de secondes..

Comment faire pour que le message s'affiche en premier puis que le traitement s'effectue apres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
Déroulement du chargement de la page
<html>
 
<body onLoad...>
 
Affichage d'éléments PHP avec lancement d'ajax pour récupérer les valeurs. (traitement long)
 
</body>
</html>

Le code que j'utilise pour afficher le message

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<body class="am_body" onLoad="document.getElementById('siteLoader').style.display = 'none';">
 
  <div id='siteLoader'>
	<div id='loadImg'>
		<img src='images/loading10.gif' border='0'>
	</div>
	<div id='loadText'>
		Page is loading. Plz Wait
	</div>
  </div>

Le code du CSS

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
 
#siteLoader {
	position: absolute;
	z-index: 100;
	background-color: #000;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	top: 40%;
	left: 0;
	height: 43%;
	width: 100%;
	text-align: center;
	line-height: 0;	
}
 
#loadImg {
	position: absolute;
	text-align: center;
	background-color: #fff;
	width: 100%;
	z-index: 100;
	top: 10%;
	left: 0;
	line-height: 0;	
}
 
#loadText {
  position: relative;
  font-family: Verdana, Arial;
  font-size: 20px;
  top: 87%;
  height: 25px;
  color: #fff;	
  text-align: center;  
	vertical-align: bottom;
}

Précision, cette page est un module XOOPS. Ca vbient peut être de la!

Voila merci de votre aide

**Djakisback** · 08/06/2007, 14h37

Salut,
j'imagine donc que tu travailles en synchrone.
Pour info onLoad() est exécuté après le chargement. (ils auraient du l'appeler onLoaded ^^)

A priori tu vires ton onLoad et t'ajoutes juste à la fin de ton callback du xhr :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('siteLoader').style.display = 'none';

Bye

[d'ailleurs, c'est plutôt dans ton onLoad que tu devrais lancer la requête Ajax, sinon aucun intérêt de faire de l'AJAX]

Chargement d'une page web utilisant de l'AJAX/HTML/PHP

JavaScript

Discussions similaires

Partager

Partager