Loading, please wait

Soyez le premier à donner votre avis sur cette source.

Snippet vu 23 973 fois - Téléchargée 27 fois

Contenu du snippet

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 / Exemple :


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

A voir également

Ajouter un commentaire

Commentaires

_Thy_
Messages postés
33
Date d'inscription
mardi 24 août 2004
Statut
Membre
Dernière intervention
19 septembre 2005

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.
cs_Nurgle
Messages postés
1648
Date d'inscription
samedi 6 novembre 2004
Statut
Modérateur
Dernière intervention
28 avril 2011
2
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

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.