[jquery] afficher un message d'attente pendant le chargement de la page

Soyez le premier à donner votre avis sur cette source.

Vue 17 752 fois - Téléchargée 1 653 fois

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"

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

Ajouter un commentaire

Commentaires

johnvlesk
Messages postés
11
Date d'inscription
jeudi 16 novembre 2006
Statut
Membre
Dernière intervention
25 mai 2011
-
Niveau Expert !?!
or3li3n
Messages postés
193
Date d'inscription
jeudi 3 septembre 2009
Statut
Membre
Dernière intervention
22 juin 2011
-
Ce code source est là pour aider certaines personnes à produire un effet de chargement le plus simplement possible.
Pas pour être critiqué par le premier venu.

Propose mieux en restant aussi simple...et après tu pourras critiquer.
vincseize
Messages postés
114
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
28 mars 2010
-
Hum, chez moi cela marche pas;

j ai testé, en plaçant simplement dans le body:

<?php

$i=0;
while($i<50000000) {
//$tab[$i]=qqchose;
$i=$i+1;
}
echo $i;

?>

ET rien ne se passe pendant le temps d attente de l itération

???
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Niveau Expert !?!
du deuxième premier venu !
JJDAI
vincseize
Messages postés
114
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
28 mars 2010
-
Du coup autant autant utiliser le ready.function comme avant (comme ds n importe quelle tuto)

puisque qu'en placant la function souhaitée dans:

$(document).ready(function(){

$('body').prepend("
Chargement en cours . . .

");

#Ma FUNCTION ou mon url.php (a la fin de laquelle on rajoute:
<script type="text/javascript" >

function body_ready(){$(document.body).css('margin-top','');$('#wait').css('display','none');}
$(document).ready(function(){body_ready();});

</script>
)

;});

ET cela marche parfaitement

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.