Table des matières

Description

Cela permet de faire un peu à la Gmail lors du chargement de ces pages, il affiche une petite boîte en haut à droite avec marquer “Chargement en cours …”.
Et bien voici une petite technique qui permet de faire la même chose.

Je vous rappelle juste que Gmail utilise ceci dans le cadre d'une application basé sur AJAX et qu'au moment de l'affichage de cette boîte case, il charge tout Gmail du coup ça prends du temps :)

Code

Le js qui va permettre d'afficher la petite boîte.

javascript
function waitPreloadPage() 
{
	if (document.getElementById)
	{
		document.getElementById('chargement').style.visibility='hidden';
	}
}

Le code HTML de cette petite boîte

html4strict
<div id="chargement"> 
	Chargement en cours ...
</div>

Et la p'tite feuille de style qui permet de placer la p'tite boîte tout en haut à droite de la page.

css
#chargement 
{
	position: absolute; 
	font-family: arial; 
	font-size: 11px; 
	right: 0px; 
	top: 0px; 
	background-color: #B90000; 
	color: white; 
	padding: 1px;
	z-index: 10;
	font-weight: bold;
	border: solid 1px white;
}

Utilisation

Pour l'utiliser, il suffit de faire appel à la fonction js citer plus haut (<script type=“text/javascript”>…</script>), faire appel à la feuille de style et insérer le code HTML juste après la balise body.
Puis dans cette balise body, mettez :

html4strict
<body onload="waitPreloadPage();">


A tester : loading.html

j0k3r_n0ir 21/01/2006 22:49