Ladebalken mit automatischer Weiterleitung (fake preloader)
Für ein Projekt benötigte ich einen falschen Preloader (fake preloader) damit die Seite nicht soooo schnell da ist wie’s eigentlich der Fall ist. Es soll nach mehr „Aufwand“ aussehen. Hier der Code für den Ladebalken…
<script type="text/javascript">
// JavaScript-Ladebalken mit Weiterleitung zu einer anderen Seite
var zaehler = 1;
function weiterleitung(ziel) {
if ( zaehler < ziel) {
zaehler = zaehler + 1;
document.getElementById("status").style.width = zaehler + "px";
document.getElementById("counter").innerHTML = zaehler;
window.setTimeout("weiterleitung('" + ziel + "')", 10);
}
else {
location.href="andere_seite.htm";
}
}
</script>
<span id="counter"></span>
<img id="status" src="spacer.gif" width="10" height="10"
style="background-color: #FF8000;
border: solid 1px #000000;">
<script type="text/javascript">
weiterleitung('450'); // Funktion starten
</script>
In meiner Version habe ich das noch verfeinert… indem ich die Zeitanzeige aus- und dafür Informationen (Ladestatus…) einblende…
…
<style type="text/css">
<!--
body {
padding: 0;
margin:0;
background: url(img/timer.jpg) repeat;
}
#loader {
margin: 25% auto;
}
span {
clear: both;
text-align: center;
padding: 30px;
border: 1px solid #666;
background: #fff;
}
-->
</style>
…
<script type="text/javascript">
// JavaScript-Ladebalken mit Weiterleitung zu einer anderen Seite
var zaehler = 1;
function weiterleitung(ziel) {
if ( zaehler < ziel) {
zaehler = zaehler + 0.5;
document.getElementById("status").style.width = zaehler + "px";
document.getElementById("counter").innerHTML = zaehler;
window.setTimeout("weiterleitung('" + ziel + "')", 10);
}
if ( zaehler <= 2) {
document.getElementById("aktion").innerHTML = "Lade Applikation";
}
if ( zaehler == 100) {
document.getElementById("aktion").innerHTML = "Prüfe Kundenstatus";
}
if ( zaehler == 250) {
document.getElementById("aktion").innerHTML = "Initiiere Applikation";
}
if ( zaehler == 350) {
document.getElementById("aktion").innerHTML = "Lade Werbeapplikation";
}
…
if ( zaehler == 1000) {
location.href="<?php echo $url ?>";
}
/* else {
location.href="<?php echo $url ?>";
}*/
}
</script>
<div id="loader">
<div style="margin: 0 auto; padding: 20px; text-align:center; font-size: 2em;">
<span id="aktion"></span></div>
<div style="visibility:hidden;"><span id="counter"></span> </div>
<img id="status" src="spacer.gif" width="10" height="10"
style="background-color: #FF8000;
border: solid 1px #000000;">
<script type="text/javascript">
weiterleitung('1000'); // Funktion starten auf 1000 gesetzt damit es länger dauert…
</script>
</div>
</body>
</html>
Quelle: http://www.homepage-total.de
