begin process at 2012 05 27 07:04:16
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Astuces

 > LOADING, PLEASE WAIT

LOADING, PLEASE WAIT


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Astuces Classé sous :chargement, loading, wait, attendre, patienter Niveau :Débutant Date de création :07/09/2005 Date de mise à jour :07/09/2005 14:36:50 Vu :21 423

Auteur : _Thy_

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

 Description

Pour faire patienter l'utilisateur lors du chargement d'une longue page sans utiliser de popups. Il s'agit d'une amélioration d'un code publié ici, je crois.

Source

  • <DIV ID="plsWait" STYLE="position:absolute;z-index:5;top:10%;left:15%;" align="center">
  • <table width=400 cellpadding=3 cellspacing=0>
  • <tr height=128><td bgcolor=#0000FF>
  • <table height=100% width=100% cellpadding=1 cellspacing=0>
  • <tr><td bgcolor=#FFFFFF align=center>
  • <b>
  • Veuillez patienter, chargement en cours...<br>
  • - Ne pas interrompre -
  • </b>
  • </td></tr>
  • </table>
  • </td></tr>
  • </table>
  • </DIV>
  • <DIV ID="isFinished" STYLE="display:none;position:absolute;z-index:5;top:1%;left:1%;" align="center">
  • <table width=400 cellpadding=3 cellspacing=0>
  • <tr height=64><td bgcolor=#00FF00>
  • <table height=100% width=100% cellpadding=1 cellspacing=0>
  • <tr><td bgcolor=#FFFFFF align=center>
  • <b>
  • Script terminé.
  • </b>
  • </td></tr>
  • </table>
  • </td></tr>
  • </table>
  • </DIV>
  • <%
  • ' Puisque ça va être long, on se donne une heure :
  • Server.ScriptTimeout = 3600
  • ' Pour afficher ce qu'on a déjà chargé :
  • response.flush
  • '
  • '
  • ' Ici le code qui dure longtemps
  • '
  • '
  • ' et quand on a fini, on change les "display" des 2 div :
  • response.write "<script>"
  • ' On cache "plsWait"
  • response.write "document.all["&chr(34)&"plsWait"&chr(34)&"].style.display = "&chr(34)&"none"&chr(34)&";"
  • ' On montre "isFinished"
  • response.write "document.all["&chr(34)&"isFinished"&chr(34)&"].style.display = "&chr(34)&chr(34)&";"
  • response.write "</script>"
  • %>
<DIV ID="plsWait" STYLE="position:absolute;z-index:5;top:10%;left:15%;" align="center">
<table width=400 cellpadding=3 cellspacing=0>
<tr height=128><td bgcolor=#0000FF>
<table height=100% width=100% cellpadding=1 cellspacing=0>
<tr><td bgcolor=#FFFFFF align=center>
<b>
Veuillez patienter, chargement en cours...<br>
- Ne pas interrompre -
</b>
</td></tr>
</table>
</td></tr>
</table>
</DIV>

<DIV ID="isFinished" STYLE="display:none;position:absolute;z-index:5;top:1%;left:1%;" align="center">
<table width=400 cellpadding=3 cellspacing=0>
<tr height=64><td bgcolor=#00FF00>
<table height=100% width=100% cellpadding=1 cellspacing=0>
<tr><td bgcolor=#FFFFFF align=center>
<b>
Script terminé.
</b>
</td></tr>
</table>
</td></tr>
</table>
</DIV>

<%
' Puisque ça va être long, on se donne une heure :
Server.ScriptTimeout = 3600

' Pour afficher ce qu'on a déjà chargé :
response.flush

'
'
' Ici le code qui dure longtemps
'
'

' et quand on a fini, on change les "display" des 2 div :
response.write "<script>"
' On cache "plsWait"
response.write "document.all["&chr(34)&"plsWait"&chr(34)&"].style.display = "&chr(34)&"none"&chr(34)&";"
' On montre "isFinished"
response.write "document.all["&chr(34)&"isFinished"&chr(34)&"].style.display = "&chr(34)&chr(34)&";"
response.write "</script>"

%>

 Conclusion

On utilise deux divs l'un étant caché au départ. A la fin du script, on passe le "plsWait" en "display=none" et le "is Finished" en "display=" (donc visible).

Le response.flush au début est important, il permet d'afficher tout de suite le "plsWait", sinon il faut attendre un vidage de buffer et du coup ça ne sert plus à rien.

Le fait de mettre le "<script>" à la fin dans un response.write au lieu de le "sortir" du code ASP permet de créer d'autres divs cachés et de ne les afficher que si certaines conditions sont remplies, on peut penser à un div "errorOccured" par exemple.

Ce code ne permet pas d'afficher une jauge de progression. Il est possible de mettre un gif animé dans le div "plsWait" afin que l'usager ait la sensation que quelque chose se passe.
Bien entendu les <table> utilisées ici ne sont livrées qu'à titre d'exemple, vous pouvez mettre ce que vous voulez à la place, pourquoi pas un grand gif animé avec une pendule ?
Ca donnerait :

<DIV ID="plsWait" STYLE="position:absolute;z-index:5;top:10%;left:15 %;"
align="center">
<img src=pendule.gif>
</DIV>

Avec une bonne transparence, effet garanti !

Testé avec succès sur Firefox 1.06 et IE6
Ne fonctionne pas sur Mozilla 1.4 ni sur Opera 6.0 (les divs gardent leurs "display")

Le vrai mot de la fin :
Le style Html est pas fini fini, les puristes ajouteront des " autour des valeurs et mettront un <br />, moi j'ai un métier, pas le temps à ça. Et bien sur c'est quand même à intégrer proprement dans les traditionnels <html><body> et compagnie.


 Historique

07 septembre 2005 14:36:51 :
correction texte d'intro

 Sources de la même categorie

Source avec Zip Source .NET (Dotnet) ASP.NET - SAVOIR QUAND L'UTILISATEUR FERME LA FENETRE VIA CA... par werdDomain
CLASSE IMBRIQUÉS EN VBSCRIPT DE DOSSIERS (APPLICABLE ASP) par internetdev
Source avec Zip SÉRIALISER / DÉSÉRIALISER DES VARIABLES EN ASP par lejdu
CREATION D'UN AUTOCOMPLETE JQUERY AVEC UN CODE SOURCE ASP ET... par dedebis84
Source .NET (Dotnet) RÉCUPÉRER DES VALEURS D'UNE LIGNE DANS UN DATAGRID APRÈS AVO... par PascalCmoa

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture Source .NET (Dotnet) LOADING DANS UNE PAGE #4 (.NET) par Jackboy
LOADING DANS UNE PAGE #2 par Jackboy
Source avec Zip LOADING DANS UNE PAGE par Jackboy
AFFICHER MESSAGE D'ATTENTE (PAGE EN COURS DE CHARGEMENT) PEN... par Boreux
BARRE DE CHARGEMENT DE SITE par Mister_one7479

Commentaires et avis

Commentaire de Nurgle le 08/09/2005 18:50:43 administrateur CS

mouaip...
Les différentes sources de loading de JackBoy (si je me souviens bien) étaient pas mal aussi.
Non, le problème c'est ton document.all["&chr(34)&"plsWait"&chr(34)&"].style.display = "&chr(34)&"none"&chr(34)&";" !! Une vrai horreur. Ne t'étonne pas que ça te tourne pas sous Mozilla, Netscape ou Opera...
Je peux te suggérer une petite modif...:p ?

Dans les "styles" de tes div : Ne mets que "display=none;", pour les position:absolute, 1. tu n'as pas besoin de les mettres, et 2. de toute façon ce serait mieux d'utiliser un bloc en CSS en haut de ta page.
Ensuite, tu n'as plus qu'à faire :
Response.Write("document.getElementByID(""plsWait"").style=""display=block;""")

Ce qui est quand même un peu plus...propre :p

Sinon, l'idée du Response.Flush est bien, mais précise bien en haut "Response.Buffer = True", sinon ça ne marchera pas toujours suivant les versions de IIS sur lesquels ça tourne.

A+++
Nurgle

Commentaire de _Thy_ le 19/09/2005 11:37:00

Ok merci je vais tâcher de mettre ça en place, mais je ne vois pas très bien ce que tu suggères pour les "position:absolute". Les CSS sont assez nouveaux pour moi et j'apprend ça empiriquement :(

Et puis merci aussi pour l'utilisation de "" : ça permet de clarifier tout ça en effet !!! Je code surtout en php où on utilise \" et je ne connaissais pas l'équivalent asp :)

Je note le response.buffer=true, qui en effet manquait.

Je reposte la nouvelle version avec tes remarques dès que possible.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

probleme de chargement de page, le fameux "wait plzzz" [ par clairelune ] bon je développe une intranet en asp.net c# j'utilise pour base de donnée oracle et sql server , mon problème est que j'ai une requête très lourde qui Veuillez patienter.... pour pages ASP côté serveur [ par Maroxye ] Bonjour, J'ai un site conçu en ASP.net qui contient plusieurs requêtes SQL assez longues à charger. Je me demandais si il était possible de rajouter Pb chargement Gridview imbriqués [ par Balwin ] Bonjour, Je vais essayer d'être clair. J'ai créé un Gridview qui contient plusieurs colonnes dont une contenant un code client. Dans une autre de ses stopper le chargement [ par fabiin ] Salut !comment faut t'il faire pour arrêter le chargement d'une page.par exemple ds une condition if, si elle est vrai ben ca n'execute pas la suite d pb chargement active x [ par kmaya ] Mon pb : Ma page asp contient un active x tableau développé sous vb.Sur le load de cette page, j'envoie des parametres à mon active x. Pb : l'active x Actualisation d'une page et chargement dans cache [ par sebhehe ] Je cherche une solution pour que ma page ne se mette pas dans le cache.explication:Je complete une page avec un formulaire qui se trouve sur cette mem langue [ par hamrouni ] Salutj'arive à ecrire un script ASP dans un fichier include dont l'extension.inc qui rederige le visiteur selon la langue du navigateur que voici le s langue [ par hamrouni ] Salutj'arive à ecrire un script ASP dans un fichier include dont l'extension.inc qui rederige le visiteur selon la langue du navigateur que voici le s temps d'attente lors d'un chargement de page! HELP! [ par glopglop ] Salut!!Je voudrait laisser un message de chargement de page à l'utilisateur!!Je m'explique:Page1 l'utilisateur clic sur un lien qui renvoie page 2! Je chargement de pages web [ par sebrs1 ] Pourquoi mes pages asp mettent parfois 10-20 sec a s'afficher apres avoir été chargée ?@+Sebrs1PS (qui ne signifie pas playstation :-)) : visitez mon


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

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,045 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales