begin process at 2012 05 28 10:56:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > [JQUERY] AFFICHER UN MESSAGE D'ATTENTE PENDANT LE CHARGEMENT DE LA PAGE

[JQUERY] AFFICHER UN MESSAGE D'ATTENTE PENDANT LE CHARGEMENT DE LA PAGE


 Information sur la source

Note :
1 / 10 - par 1 personne
1,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :message chargement, message attente, attente chargement, chargement page Niveau :Expert Date de création :24/05/2011 Date de mise à jour :24/05/2011 10:39:54 Vu / téléchargé :4 985 / 321
Auteur : or3li3n

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 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.


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

  • <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>
<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>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

24 mai 2011 10:26:18 :
Oublie d'appel de jQuery dans le code source
24 mai 2011 10:27:58 :
Erreur de frappe dans le code source
24 mai 2011 10:39:54 :
Ajout du fichier image : chargement.gif Disponible dans le zip

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de johnvlesk le 25/05/2011 14:18:02

Niveau Expert !?!

Commentaire de or3li3n le 25/05/2011 16:52:02

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.

Commentaire de vincseize le 25/05/2011 17:12:16

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

???

Commentaire de JJDai le 25/05/2011 19:45:46

Niveau Expert !?!
du deuxième premier venu !
JJDAI

Commentaire de vincseize le 25/05/2011 20:53:26

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("<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>");


#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

Commentaire de alain04 le 30/05/2011 08:32:59

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?

Commentaire de vincseize le 30/05/2011 09:04:16

entierement d accord

Commentaire de Allan007 le 03/06/2011 23:54:56 1/10

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

Commentaire de JJDai le 04/06/2011 10:49:28

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

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Green Energy Solutions With Light Bulb Morphed Into Landscape
Photo Children Camping at Night in a Tent 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,295 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)