nicht angemeldet
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