• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Ladebalken im HTML

H

HelenaJS

New member
Hey,

Ich habe eine HTML-Seite, bei der eine Datei ausgelesen wird. Das dauert eine weile, also habe ich mir gedacht, dass es nett wäre einen Ladebalken einzubinden.

Leider konnt eich auf Anhieb im Internet nichts finden, wie man das einfach umsetzt. Meist waren da Beispiele mit Ajax und PHP usw, aber so wild brauche ich es ja garnicht.

Eigentlich wollte ich nur einen Balken, der anfangs leer ist und der bei einem Schleifendruchlauf im JS um 1/(Anzahl der Spalten) erweitert wird.

Habt ihr auf Anhieb ein Tutorial? Oder einen Tipp wie man das leicht umsetzen kann?

Gruß
 
Zuletzt bearbeitet von einem Moderator:
Dormilich schrieb:
Es ist dem <progress> Element egal, wer es mit Werten füttert.
Zum Vergrößern anklicken....
aber der fragestellerin nicht :)
nochmal: wie kann man die progressbar ohne ajax sinnvoll nutzen bei einem standard formular request? ich hätte bei mir auch ein paar anwendungsfälle dafür aber ich habe bisher nicht rausgefunden, wie ich an den wert für 100 % und unterwegs an die fortlaufenden werte komme.
 
Ich habe auf meiner Fotoseite einfach ein animiertes Gif im Einsatz. Das wird solange angezeigt, bis es durch das erste geladene Bild überschrieben wird. Das ist recht einfach umzusetzen, allerdings zeigt es den genauen Fortschritt nicht an.

Fortschrittsbalken.gif
(zur Demonstration einfach anklicken)
 
Wenn man die <img>-Node nicht erst im onsubmit erstellt, werden die GIFs im FF und Chrome wunderbar auch während des Ladens animiert - nur der IE streikt...:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
button img, button.pending span {
	display: none;
}
button.pending img, button span {
	display: initial;
}
</style>
</head>
<body>
<form action="/server/delay.php" onsubmit="this.button.className = 'pending';">
delay: <input name="delay" value="5000">
<button name="button"><span>submit</span><img src='http://127.0.0.1/Bilder/wait1.gif'></button>
</form>

</body>
</html>
 
mikdoe schrieb:
was für ein js ist das denn? davon hast du bisher nichts gesagt.
Zum Vergrößern anklicken....

Also kein request an ein Webservice oder sonstiges. Kein besonders komplexes.

In meinem JS öffne ich eine Datei und iteriere dann über diese, weiß also zu jedem Zeitpunkt ´zu wieviel Prozent ich durch bin mit dem File.

Meine Idee war es während der Schleife den Ladebalken entsprechend zu aktualisieren und am Ende den Balken auf 100% zu setzen. Wie könnte dazu eine Lösung aussehen? Tests bisher gaben leider wenig Erfolg, da beim durchlauf der Schleife kein Text oder ähnliches im HTML aktualisiert wurde..
 
ok danke :)

Klingt vielversprechend.. allerdings wie packe ich denn in eine For-Schleife diese Funktionalität rein?
Habe mal das "setTimeout"-Beispiel von W3S angepasst:

HTML: 
<script>
function timedText() {
for (var i = 1; i < 3; i++) {
    var x = document.getElementById("txt");
    setTimeout(function(){ x.value="2 seconds" }, 2000);
    setTimeout(function(){ x.value="4 seconds" }, 4000);
    setTimeout(function(){ x.value="6 seconds" }, 6000);
    }
}
</script>

Theoretisch müsste ja 3 mal hintereinander "2 Seconds", "4Seconds",... angezeigt werden..
Es wird aber nur einmal ausgeführt.

- - - Aktualisiert - - -

Ok Problem gelöst..

Also ich mach es jetzt so, dass ich mit setTimeOut eine Funktion aufrufe, die rekursiv immer wieder aufgerufen wird bis alle Reihen durchlaufen sind.
Als Zeit bei SetTimeout habe ich eine 0 gesetzt.. heißt das dann das es wirklich ohne Verzögerung weiter geht?
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben