Auf meiner Website kann eine Reihe von Vorgängen sehr lange dauern.
Wenn ich weiß, dass das Laden einer Seite eine Weile dauern wird, möchte ich eine Fortschrittsanzeige anzeigen, während die Seite geladen wird.
Im Idealfall würde ich etwas sagen, das in etwa so lautet:
$("#dialog").show("progress.php");und dieses Overlay über der geladenen Seite platzieren (und nach Abschluss des Vorgangs wieder verschwinden).
Die Codierung des Fortschrittsbalkens und die Anzeige des Fortschritts ist kein Problem, das Problem besteht darin, eine Fortschrittsanzeige zu erhalten, die erscheint, WÄHREND die Seite geladen wird. Ich habe versucht, JQuery-Dialoge für diese zu verwenden, aber sie erscheinen nur, nachdem die Seite bereits geladen ist.
Dies muss ein häufiges Problem sein, aber ich kenne mich nicht gut genug mit JavaScript aus, um zu wissen, wie man das am besten macht.
Hier ein einfaches Beispiel, um das Problem zu veranschaulichen. Der folgende Code zeigt das Dialogfeld nicht an, bevor die 20-Sekunden-Pause abgelaufen ist. Ich habe es in Chrome und Firefox versucht. Tatsächlich sehe ich nicht einmal den Text "Bitte warten...".
Hier ist der Code, den ich verwende:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
<div id="please-wait">My Dialog</div>
<script type="text/javascript">
$("#please-wait").dialog();
</script>
<?php
flush();
echo "Waiting...";
sleep(20);
?>
</body>
</html>
