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

Soyez le premier à donner votre avis sur cette source.

Vue 18 880 fois - Téléchargée 1 724 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
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

tout à fait d'accord avec ce qui vient d'être dit;
Cependant je constate que cette "source" (entre guillemet) génère plus de commentaires que certaines autres qui mériterais le nom de Source (avec la majuscule).
Si l'objectif est de faire parler de soi, "l'expert" (toujours entre guillemet) à réussi son coup;
Passons notre chemin et arrêtons nous sur ce qui en vaut la peine.
JJDAI
Messages postés
82
Date d'inscription
samedi 6 décembre 2003
Statut
Membre
Dernière intervention
12 février 2012

On ne dois pas avoir la même notion du niveau "Expert" a mon avis, cette source n'est même pas aux normes W3C.
On peux faire un chargeur aussi simple mais beaucoup plus fonctionnel et optimiser en respectant les normes, puis ce genre de source c'est du vue et revu..

Bonne continuation
Messages postés
113
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
28 mars 2010

entierement d accord
Messages postés
25
Date d'inscription
samedi 4 septembre 2004
Statut
Membre
Dernière intervention
27 août 2012

C'est vrai que le "niveau", on s'en fiche un peu.
Tout ce qu'il faut (qu'il faudrait!)c'est que les propositions de script présentés ICI fonctionnent, ce qui n'est malheureusement pas toujours le cas.
J'écrivais ça il y à déjà un bon bout de temps et qu'est-ce que j'ai pas entendu !!!
Et pourtant, à quoi sert de poster un script qui ne fonctionne pas?
Messages postés
113
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
Afficher les 9 commentaires

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.