[jquery] afficher un message d'attente pendant le chargement de la page
Description
EXPLICATIONS:
Le <body> sera envoyé à 1 000 000px vers le haut (permettant de le rendre non visible)
On y ajoute un <div> en position "absolute" afin de l'afficher à la place de votre <body>.
Une fois votre page chargée complétement,le <div> disparait pour laisser place à votre page (voir aussi le tutoriel : Comment ajouter une image de chargement en cours (spinner) en jQuery ?).
Avantage: Ce code ne demande aucune modification HTML et CSS.
Inconvénient: Du JavaScript dans le body.
----------------------------------------------------------------------------------------------------
IMPORTANT:
Ce code source est a placer JUSTE APRÈS LA BALISE <BODY>.
----------------------------------------------------------------------------------------------------
EXEMPLE:
<body>
"LE CODE SOURCE JAVASCRIPT"
"LE RESTE DU CODE DE VOTRE PAGE"
Le <body> sera envoyé à 1 000 000px vers le haut (permettant de le rendre non visible)
On y ajoute un <div> en position "absolute" afin de l'afficher à la place de votre <body>.
Une fois votre page chargée complétement,le <div> disparait pour laisser place à votre page (voir aussi le tutoriel : Comment ajouter une image de chargement en cours (spinner) en jQuery ?).
Avantage: Ce code ne demande aucune modification HTML et CSS.
Inconvénient: Du JavaScript dans le body.
----------------------------------------------------------------------------------------------------
IMPORTANT:
Ce code source est a placer JUSTE APRÈS LA BALISE <BODY>.
----------------------------------------------------------------------------------------------------
EXEMPLE:
<body>
"LE CODE SOURCE JAVASCRIPT"
"LE RESTE DU CODE DE VOTRE PAGE"
Source / Exemple :
<script src="[http://code.jquery.com/jquery-1.6.1.js]" ></script>
<script type="text/javascript" >
$('body').css("margin-top","-1000000px");
$('body').prepend("<div id='wait' style='position:absolute;width:220px;top:40%;left:40%;text-align:center;font-weight:bold;' >Chargement en cours . . .<br/><img src='./img/chargement.gif' ></img></div>");
function body_ready(){$('body').css('margin-top','');$('#wait').css('display','none');}
$(document).ready(function(){body_ready();});
</script>
Codes Sources
A voir également
- [jquery] afficher un message d'attente pendant le chargement de la page
- Afficher un tableau php en html - Conseils pratiques -PHP
- Exemple de page d'authentification - Conseils pratiques -PHP
- Plan de chargement - Forum Visual Basic 6
- Afficher un tableau php - Forum PHP
- Exemple de code html page d'accueil ✓ - Forum Graphisme/design
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.