nicht angemeldet
Progressbar
Hallo,
ich habe mir selber eine Progressbar gebastelt, die angezeigt wird wenn die neue Seite berechnet wird.
Wenn man nun per history.back zurück geht, wird die animierte Progressbar immernoch angezeigt. Kann man diese nach history.back oder kurz vor dem Laden der neuen Seite beenden?
Den code einfach in eine html-Datei kopieren und ausprobieren.
<html>
<head>
<script type="text/javascript">
var aktiv;
// Animations-Initialisierung.
function animation() {
window.clearInterval(aktiv);
anzahlDivs = 1;
aktiv = window.setInterval("animation1()", 200);
ladebalken1.style.visibility = "hidden";
ladebalken2.style.visibility = "hidden";
ladebalken3.style.visibility = "hidden";
ladebalken4.style.visibility = "hidden";
ladebalken5.style.visibility = "hidden";
ladebalken6.style.visibility = "hidden";
ladebalken7.style.visibility = "hidden";
ladebalken8.style.visibility = "hidden";
ladebalken9.style.visibility = "hidden";
ladebalken10.style.visibility = "hidden";
}
// Animationsdurchlauf.
function animation1() {
ladebalken.style.visibility = "visible";
switch (anzahlDivs) {
case 1:
anzahlDivs = 2;
ladebalken1.style.visibility = "visible";
break;
case 2:
anzahlDivs = 3;
ladebalken2.style.visibility = "visible";
break;
case 3:
anzahlDivs = 4;
ladebalken3.style.visibility = "visible";
break;
case 4:
anzahlDivs = 5;
ladebalken4.style.visibility = "visible";
break;
case 5:
anzahlDivs = 6;
ladebalken5.style.visibility = "visible";
break;
case 6:
anzahlDivs = 7;
ladebalken6.style.visibility = "visible";
break;
case 7:
anzahlDivs = 8;
ladebalken7.style.visibility = "visible";
break;
case 8:
anzahlDivs = 9;
ladebalken8.style.visibility = "visible";
break;
case 9:
anzahlDivs = 10;
ladebalken9.style.visibility = "visible";
break;
case 10:
anzahlDivs = 11;
ladebalken10.style.visibility = "visible";
break;
default:
anzahlDivs = 1;
ladebalken1.style.visibility = "hidden";
ladebalken2.style.visibility = "hidden";
ladebalken3.style.visibility = "hidden";
ladebalken4.style.visibility = "hidden";
ladebalken5.style.visibility = "hidden";
ladebalken6.style.visibility = "hidden";
ladebalken7.style.visibility = "hidden";
ladebalken8.style.visibility = "hidden";
ladebalken9.style.visibility = "hidden";
ladebalken10.style.visibility = "hidden";
break;
}
}
</script>
</head>
<body>
<form>
<input type="button" name="start" value="start" onclick="animation()">
</form>
<div id="ladebalken" style="position:absolute; width:400px; height:10px; background-color:#F9F9F9; visibility:hidden"><b><font color="#0000A0"> Karte wird neu geladen...</font></b>
<div id="ladebalken1" style="position:absolute; left:200px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken2" style="position:absolute; left:220px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken3" style="position:absolute; left:240px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken4" style="position:absolute; left:260px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken5" style="position:absolute; left:280px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken6" style="position:absolute; left:300px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken7" style="position:absolute; left:320px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken8" style="position:absolute; left:340px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken9" style="position:absolute; left:360px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
<div id="ladebalken10" style="position:absolute; left:380px; top:4px; width:15px; height:8px; background-color:#0000A0; font-size:1; visibility:hidden"></div>
</div>
</body>
</html>
Danke für Eure Hilfe,
Paul
-
Hallo Paul!
Was möchtest Du damit erreichen? Die Animation hat ja keinerlei Zusamenhang mit dem tatsächlichen Ladezustand der Seite. Wenn jemand eine schnelle Anbindung hat, dann muss er tatsächlich 200 * 10 Millisekunden Deine Animation sehen? Sehr wirr, das siehst Du schon, bei Deinem "Problem" der History. Welches Du natürlich über einen Cookie, oder auch einfach einen übergebenen Querystring lösen könntest.
Die beste Lösung aber wäre, dass Du tatsächlich schaust, ob im Dokumentbaum alle Elemente schon vorhanden sind und daran orientiert, Deinen Ladebalken anzeigst. Dann würde bei der History auch der Balken nicht mehr (oder nur unverhältnismäßig kurz) angezeigt.
Schönen Gruß
Afra