Home
Navigation
Impressum
Coder Welten - Programmierung und Optimierung
Coder Welten
 
 

 

 

Ladebalken mit Fortschrittsanzeige

Eine animierte Statusanzeige mit JavaScript realisieren

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.

 
Navigation

Einstieg in JavaScript

 


Tutorials & Demos

 

Weitere Themen

Übersicht

 


Copyright © Verlag Horst Müller - Stendal - 2006 - Impressum - Datenschutz - Nutzungsbedingungen