Um es vorweg zu nehmen, eine mit einem Server synchronisierte
Statusanzeige zu realisieren, ist allein mit einem kleinen JavaScript nicht möglich, zumindest ist uns
bislang kein Lösungsansatz bekannt. Im Zusammenspiel mit anderen Script- und Programmiersprachen sollten
sich hingegen Lösungen finden lassen.
Dennoch kann mit einem kleinen JavaScript eine animierte Statusanzeige realisiert werden, sei es in Form
eines einfachen Ladebakens mit Fortschrittsanzeige oder einfach nur als Animation einer sich
wiederholenden Abfolge. Dem Benutzer einer Webseite kann so signalisiert werden "es tut sich etwas",
leider auch dann noch, wenn sich bereits nichts mehr tut.
Demo einer einfachen Statusanzeige:
Zum eigentlichen Code-Listing gibt es nicht viel zu schreiben. Im
Beispiel wird zwar der Event-Handler onload benutzt, doch praktisch ist auch jeder andere Event-Handler
für einen ersten Aufruf der Funktion geeignet, um die Fortschrittsanzeige auszulösen.
Wie schnell oder wie langsam eine Animation abläuft, lässt sich innerhalb von setTimeout über dem der
Funktion folgenden Wert steuern, wobei der Wert in Millisekunden anzugeben ist. Die aufzurufende
Funktion kann als String mit () Klammern und Anführungszeichen oder als ein Zeiger auf eine Funktion
ohne () Klammern und Anführungszeichen notiert werden. Weiterhin ist die Verwendung einer anonymen
function() möglich.
Bei jedem Aufruf der der Funktion "ladeBalken()" wird der um 1px erhöhte Wert der CSS Eigenschaft width
mit der DOM-Methode getElementById dem Element mit der ID "fortschritt" zugewiesen. Die Verzögerung für
den Aufruf der Funktion beträgt im Beispiel 90 Millisekunden.
Ein HTML-Gerüst mit dem JavaScript-Code für das obere Beispiel:
<!DOCTYPE html> <html> <head> <title>Ladebalken mit Fortschrittsanzeige</title> <style type="text/css"> body {background-color:#ccc} h1 {text-align:center} div#ladebalken {height:22px; width:380px; border:1px solid red; margin:auto} div#fortschritt {height:22px; width:1px; background-color:#dd0; border:none} </style> </head> <body> <h1>Lade einen Balken</h1> <div id="ladebalken"> <div id="fortschritt"></div> </div> <p style="text-align: center"> <input type="button" onclick="ladenStoppen()" value=" Stoppen "> <input type="button" onclick="weiterLaden()" value=" Weiter Laden "> </p> <script type="text/javascript"> "use strict"; var erhoehe_pixel = 1; var ladevorgang; if (window.addEventListener) { window.addEventListener("load", ladeBalken, false); // für alle anderen Browser } else if (window.attachEvent) { window.attachEvent("onload", ladeBalken); // für ältere IE } /*--- Funktion für die Fortschrittsanzeige ----------------------------*/ function ladeBalken() { erhoehe_pixel++; var schritt = document.getElementById("fortschritt"); if (erhoehe_pixel <= 380) { ladevorgang = window.setTimeout("ladeBalken()", 90); schritt.style.width = erhoehe_pixel + "px"; } } /*--- Funktionen zum Stoppen und zum Fortsetzen des Ladevorgangs ------*/ function ladenStoppen() { window.clearTimeout(ladevorgang); } function weiterLaden() { ladeBalken(); } </script> </body> </html>
Anmerkung: Im obigen Beispiel wurden die beiden onclick-Event-Handler innerhalb von HTML notiert. Obwohl möglich und hier der Einfachheit wegen innerhalb der Input-Buttons notiert, sollte JavaScript und HTML möglichst voneinander getrennt werden, wofür sich ebenfalls die addEventListener-Methode anbietet.
Einstieg in JavaScript
Tutorials & Demos
Übersicht