Tutorial: JavaScript Preloader

[Samuel]

Maris JavaScript Preloader:

Ich habe einen JavaScript Preloader gebraucht, weil ich n paar Grafiken zu viel habe und kein Flash nutzen kann. Gut es gibt Preloader wie Sand am Meer. Da ich aber erstens was lernen wollte und nicht einfach ein fertiges Script nehmen wollte und zweitens mir die Art angewöhnt habe, das Layout (HTML und Grafik) vom Code (PHP, oh ne, heut ist es mal JavaScript ) strikt zu trennen um die Usability ein wenig hoch zu setzen, dach ich mir, hey schreib doch mal selber eins und stelle es gleich als TUT zur Verfügung.
Ich habe Scripts zur Hilfe genommen, aber versucht zu vermeiden, stumpf Dinge abzuschreiben. JavaScript ist ne Sprache, die man nebenbei lernen kann, immer wenn man was von ihr braucht.
Ich will das auch nicht als ellenlanges Tutorial ausbreiten.
In der Regel müsst ihr es nicht mal verstehen , weil ja, wie gesagt alles strikt getrennt ist, natürlich muss es irgendwo ne Brücke zwischen JS und Layout geben, aber diese ist minimal.
Man sollte jedoch schon ne Ahnung haben, wovon ich rede, beginnen wir:

var hrefAfterLoad   = "done.htm";
var redirect        = false; //true = page redirects after preloading 
var preloaderLength = 300;
var loadBarNameID   = "barpic";
//only pictures
var Pictures        = new Array(
"preload/testbild_01.jpg",
"preload/testbild_02.jpg",
"preload/testbild_03.jpg",
"preload/testvild_04.jpg",
"preload/testbild_05.jpg"
);

Definieren wir ein paar Variablen die überall gültig sind.
hrefAfterLoad ist diejenige Adresse, wohin weitergeleitet wird, wenn das Vorladen fertig ist.
redirect ist ein kleines Feature von mir, es gibt an, ob weitergeleitet wird oder nicht (denn in meinem Fall soll es nicht).
preloaderLength ist die Angabe des Ladebalkenmaximalwertes. Also die Pixelangabe, wie breit er maximal sein soll.
Auf loadBarNameID komme ich später zu sprechen, dies ist nämlich die ID des Bildes, welches als Ladebalken fungieren soll.
Das Array Pictures ist ein Container für die Namen der Bilder, man kann so viele, wie man will eingeben, wichtig ist nur, dass der Pfad stimmt und dass auf alle Bilder das nächste mit Komma folgt, bis auf das letzte, sonst geht da gar nichts.
In diesem Falle wird ein zerhacktes Bild von Darkest, nämlich die Photoshop CS Filterliste benutzt, ich hoffe, man verzeiht mir , hehe.

Es folgt die Funktion preloader();

function preloader(){
document.getElementById(loadBarNameID).width=1;
if (!document.preImages) {preImages = new Array();
 addition=Math.floor(preloaderLength/Pictures.length);}
loadpics();
}

Zu erst wird das Bild des Ladebalkens auf die Breite von einem Pixel gesetzt.
Dann prüft das Script, ob das Array preImages bereits exsistiert, wenn nicht, wird es erstellt. Darüber hinaus wir eine Variable addition erzeugt, diese Stellt die Anzahl der Fortschrittsschritte(lustiges Wort) des Balkens dar. Und letztendlich wird die Funktion loadpics(); aufgerufen:

function loadpics(){
  for (i = 0; i < Pictures.length; i++) 
{preImages[i] = new Image();preImages[i].src = Pictures[i];}
  check(0);
}

Diese Funktion ist einfach, sie lädt alle Bilder, die mit Namen im Array Pictures gespeichert sind in das Bilderarray preImages. Während diese geladen werden, wird die Funktion check mit dem Parameter 0 aufgerufen.
check();

function check(done){
 for (i = 0; i < preImages.length; i++) {
   if (preImages[i].complete) {
     if (done<preImages.length){
document.getElementById(loadBarNameID).width=
document.getElementById(loadBarNameID).width+addition;
done++;} 
else {document.getElementById(loadBarNameID).width=preloaderLength;
if (redirect){
    location.replace(hrefAfterLoad);}return;}
}
 }setTimeout("check("+done+")",10);     
}

Quasi das Herzstück.
Es prüft, ob und welche Bilder im Bilderarray preImages schon geladen wurden und setzt bei positivem Ergebnis die Variable done eins höher und gleichzeitig dehnt sie den Ladebalken um den Wert, der vorher in der Variable addition gespeichert wurde aus. Dabei wird auch geprüft, ob die Variable done kleiner der Anzahl der geladenen Bilder ist. Ist done genau so groß, dann sind alle Bilder geladen, der Ladebalken wird auf die vorher eingestellte Größe, hier 300 Pixel=100% gestellt und die Funktion wird beendet. Es sei denn redirect steht auf true, was in diesem Fall nicht so ist; wäre es aber so, würde die Seite weitergeleitet werden.

Sind jedoch noch nicht alle Bilder geladen, tritt setTimeout ein und ruft die Funktion mit der aktuellen Anzahl geladener Bilder wieder auf (nicht nötig, aber es spricht nichts dagegen).
Es darf nicht einfach die Funktion aufgerufen werden, sondern es ist explizit nötig, eine, wenn auch kleine, Verzögerung, hier von 10 Millisekunden einzubauen. Beim Internet Explorer würde sonst eine Fehlermeldung auftreten, er kann anscheinend irgendwo irgendwas nicht verarbeiten.

Das war es im Grunde auch schon. Es fehlt nur noch ein wenig HTML Code.
Die Preloaderbox kann man sich nach seinen Wünschen gestalten.
Alles was man nur noch tun muss, ist dem Bild, welches als Preloaderbalken fungieren soll zwei Sachen hinzuzufügen, hier ein Beispiel:

<img onLoad="preloader();" src="pics/bar.jpg" name="barpic" width="300" 
height="10" id="barpic">

Das essentielle ist hier onLoad="preloader();" damit signalisiert man dem JavaScript, dass sobald der Balken geladen wurde der ganze Preloading Prozess beginnen soll.
Und noch was wichtiges, es muss eine ID vorhanden sein, hier : id="barpic" . Der Name der hier bei ID steht muss auch genauso im JavaScript unter var loadBarNameID = "barpic";
heißen, sonst klappt da gar nichts.

Anbei ist das gezippte Packet, aber auf der Festplatte geht das sehr schnell, von daher mal auf Tripod oder so uploaden, da habt ihr alle Zeit der Welt, hehe.


Falls Fragen, Korrekturen oder sonst was anstehen, fragt einfach. Das Script ist nicht der Weisheit letzter Funke, aber es tut sein nötiges.


Euer mari

P.S: Hab den Code gebrochen, weil die Darstellung sonst zerhaut wird

[kuma]

daumen nach oben!!! sehr schön

[derdiedas]

super!

greets ddd

p.s. ...bis ich gesehen habe das var redirect auf false gesetzt war

[Samuel]

Ich bedanke mich.

Und redirect is ja false, damit die Leute auch den Preloader angucken können, der is ja sonst im Nu weg

[spinal]

echt nice tutorial !

gruez spinal`

[Samuel]

Kopier und speichere deinen Beitrag in einer TXT Datei, dann klick af ändern und dann auf Löschen, denn

1. Hat das nichts mit HTML und CSS zutun, ich
2. kein Flash mehr kann und du
3. wohl nicht gesucht hast hast.

Suche erst im Forum, dann Frage, und lösch diesen Beitrag hier, weil das weder was mit meinem Tutorial noch mit HTML zutun hat.
Wenn du keine Antwort beim suchen findest, frage im Bereich Flash

Danke

[kaneda]

warum macht du die Lösung nicht OOP basiert ?

[phamez]

Ich habe da ein Problem... Das script hat so wie es in der .zip datei ist, funktioniert. Nun habe ich das auf meine Bedürfnisse abgeändert und das Problem ist folgendes: Er preloaded die Bilder doch wenn er auf die html danach srpingt lädt es die bilder nochmal... sodass der preloader sinnlos ist.

Hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Preloader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var hrefAfterLoad = "biografie.html";
var redirect = true; //true = page redirects after preloading
var preloaderLength = 120;
var loadBarNameID = "barpic";
//only pictures
var Pictures = new Array(
"img/bildergalerie_pic_01.jpg",
"img/bildergalerie_pic_02.jpg",
"img/bildergalerie_pic_03.jpg",
"img/bildergalerie_pic_04.jpg",
"img/biografie_pic_01.jpg",
"img/biografie_pic_02.jpg",
"img/biografie_pic_03.jpg",
"img/biografie_pic_04.jpg",
"img/fakten_daten_pic_01.jpg",
"img/fakten_daten_pic_02.jpg",
"img/fakten_daten_pic_03.jpg",
"img/fakten_daten_pic_04.jpg",
"img/fotografien_pic_01.jpg",
"img/fotografien_pic_02.jpg",
"img/fotografien_pic_03.jpg",
"img/fotografien_pic_04.jpg",
"img/guestbook_pic_01.jpg",
"img/guestbook_pic_02.jpg",
"img/guestbook_pic_03.jpg",
"img/guestbook_pic_04.jpg",
"img/home_01.jpg",
"img/home_02.jpg",
"img/home_03.jpg",
"img/home_04.jpg",
"img/home_06.jpg",
"img/home_07.jpg",
"img/home_08.jpg",
"img/home_09.jpg",
"img/home_10.jpg",
"img/home_11.jpg",
"img/home_12.jpg",
"img/home_13.jpg",
"img/home_14.jpg",
"img/home_15.jpg",
"img/home_16.jpg",
"img/home_17.jpg",
"img/home_18.jpg",
"img/home_19.jpg",
"img/home_20.jpg",
"img/home_21.jpg",
"img/home_22.jpg",
"img/home_23.jpg",
"img/home_24.jpg",
"img/home_25.jpg",
"img/home_26.jpg",
"img/home_27.jpg",
"img/home_28.jpg",
"img/home_29.jpg",
"img/home_30.jpg",
"img/home_31.jpg",
"img/home_32.jpg",
"img/nav_bildergalerie.jpg",
"img/nav_bildergalerie_over.jpg",
"img/nav_biografie.jpg",
"img/nav_biografie_over.jpg",
"img/nav_fakten_daten.jpg",
"img/nav_fakten_daten_over.jpg",
"img/nav_fotografien.jpg",
"img/nav_fotografien_over.jpg",
"img/nav_guestbook.jpg",
"img/nav_guestbook_over.jpg",
"img/nav_home.jpg",
"img/nav_home_over.jpg",
"img/nav_referenzen.jpg",
"img/nav_referenzen_over.jpg",
"img/nav_webcam.jpg",
"img/nav_webcam_over.jpg",
"img/referenzen_pic_01.jpg",
"img/referenzen_pic_02.jpg",
"img/referenzen_pic_03.jpg",
"img/referenzen_pic_04.jpg",
"img/spacer.jpg",
"img/webcam_pic_01.jpg",
"img/webcam_pic_02.jpg",
"img/webcam_pic_03.jpg",
"img/webcam_pic_04.jpg"
);
function preloader(){
document.getElementById(loadBarNameID).width=1;
if (!document.preImages) {preImages = new Array(); addition=Math.floor(preloaderLength/Pictures.length);}
loadpics();
}
function loadpics(){
for (i = 0; i < Pictures.length; i++) {preImages[i] = new Image();preImages[i].src = Pictures[i];}
check(0);
}
function check(done){
for (i = 0; i < preImages.length; i++) {
if (preImages[i].complete) {
if (done<preImages.length){document.getElementById(lo adBarNameID).width=document.getElementById(loadBar NameID).width+addition;done++;}
else {document.getElementById(loadBarNameID).width=prel oaderLength;if (redirect){location.replace(hrefAfterLoad);}return ;}
}
}setTimeout("check("+done+")",10);
}
</script>

<body bgcolor=#000000>
<div align="center">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<table class="tabelstyle" width="120" border="0">
<tr>
<td><img onLoad="preloader();" src="img/bar.jpg" name="barpic" width="120" height="5" id="barpic"></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
<p>&nbsp;</p>
</body>
</html>

Wisst ihr wo der Fehler liegt ?

[Samuel]

also ne kurze zeit dauert es, aber in der regel kürzer, als ohne preloader.
Ist bei der biografie.html eventuell das cachen aus geschaltet?
Ansonsten link her, denn der Code sieht eigentlich richtig aus

[phamez]

cachen ausgestellt ? hrm... der preloaded und dann lädt er trotzdem alle images bei der biografie.html nochmal neu...

hier der link:
klick

[Samuel]

also ich seh da keinen unterschied, die bilder sind auch zu klein für sowas, glaub ich.
Jedenfalls würd ich keine Preloader mit MMs code mischen, weil die in der regel auch preloader verwenden

[phamez]

Wie jetzt? Ja der preloaded ja gar nicht wirklich... kann man da nix machen? So bringt mir das nämlich nichts

[Deadeye]

ich bräuchte da auch mal hilfe! geht bei mir auch nicht, mein code schaut so aus::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Preloader</title>
<script language="JavaScript" src="preload.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var hrefAfterLoad = "index.php";
var redirect = true; //true = page redirects after preloading 
var preloaderLength = 120;
var loadBarNameID = "barpic";
//only pictures
var Pictures = new Array(
"board/1.gif"
"gfx/header.gif",
"gfx/menue_header/left_banner.gif",
"gfx/menue_header/left_main.gif",
"gfx/menue_header/left_clan.gif",
"gfx/menue_header/left_service.gif",
"gfx/menue_header/left_contact.gif",
"gfx/menue_header/left_bammer.gif",
"gfx/menue_header/right_login.gif",
"gfx/menue_header/right_votes.gif",
"gfx/menue_header/right_wars.gif",
"gfx/menue_header/right_events.gif",
"gfx/menue_header/right_server.gif",
"images/pfeil.gif",
"news/wc-news.gif",
"news/steam-news.gif",
"news/nfs-news.gif",
"news/netz-news.gif",
"news/hl2-news.gif",
"news/hardware-news.gif",
"news/esl-news.gif",
"news/download-news.gif",
"news/doom-news.gif",
"news/cs-news.gif",
"news/clan-news.gif",
"news/bf-news.gif"
);

function preloader(){
document.getElementById(loadBarNameID).width=1;
if (!document.preImages) {preImages = new Array(); addition=Math.floor(preloaderLength/Pictures.length);}
loadpics();
}
function loadpics(){
for (i = 0; i < Pictures.length; i++) {preImages[i] = new Image();preImages[i].src = Pictures[i];}
check(0);
}
function check(done){
for (i = 0; i < preImages.length; i++) {
if (preImages[i].complete) {
if (done<preImages.length){document.getElementById(loadBarNameID).width=document.getElementById(loadBarNameID).width+addition;done++;} 
else {document.getElementById(loadBarNameID).width=preloaderLength;if (redirect){location.replace(hrefAfterLoad);}return;}
}
}setTimeout("check("+done+")",10); 
}
</script>
</head>

<body bgcolor="#000000">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div align="center">
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><div align="center">
          <table class="tabelstyle" width="120" border="0">
            <tr>
              <td><img onload="preloader();" src="preloader/preload_1.gif" name="barpic" width="120" height="5" id="barpic"></td>
            </tr>
          </table>
      </div></td>
    </tr>
  </table>
</div>
<p>&nbsp;</p>
</body>
</html>

im sinne der selbe wie der von phamez nur mit meinen bildern!

[Samuel]

var Pictures = new Array(
"board/1.gif"
"gfx/header.gif",

nach board/1.gif fehlt ein Komma, mehr kann ich dazu nicht sagen, mach besser n neuen Thread auf und Frag, ich hab das tut gebaut, aber jeder browser interpretiert es eventuell anders usw, damit hab ich nichts am hut

[tafkaf]

hmm... ich raff das nicht. obwohl ich den selben code nutze, bewegt sich weder der ladebalken, noch funktioniert die weiterleitung. kein ahnung, vielleicht habe ich ja gerade tomaten auf den augen. hier die seite:

http://www.struktour.de/kunden/fotokombinat/