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