# Image Preloader



## js-mueller (26. Dezember 2002)

HI

ich möchte gerne einen Image Preloader für meine Homepage haben. Wie mache ich sowas? Also ich bin totaler js noob. Wäre nett wenn jemand nen code für mich hätte.
Also der preloader sollte unter ALLEN Browsern funktionieren. Also ich möchte nicht son IE only ding.
Wenn der Preloader fertig vorgeladen hat soll er auf ne andere seite weiterführen.

thx im voraus


----------



## Fabian H (26. Dezember 2002)

Das hatten wir letztens schon mal, musste mal 
das war so ein System zum preloaden zum kostenlosen downloaden


----------



## js-mueller (26. Dezember 2002)

Naja aber dann hab ich doch mit sicherheit irgendein copyright drinne.
Also meins kann ruhig spartanisch ausfallen.
Ich brauch nru etwas was preloaded, ich brauche keien balken die anzeigen wie weit er schon gekommen ist oder solche spielerein. Er soll einfang img1, 2 un3 preloaden und danach auf index.html gehn


----------



## Adam Wille (27. Dezember 2002)

Nunja, ich werde dir hier keinen Code für einen komplett eigens entworfenen Preloader hinsetzen, aber zum Verständnis für den Vorgang:

Ein Bild gilt ja genau dann als "preloaded", wenn es gecachet wurde.
(natürlich unter der Voraussetzung, dass der User kein Neuladen des Bildes bei Wiederbesuch der Seite aktiviert hat!)

Cachen lassen kannst du es ganz heimlich still und leise im Hintergrund deiner Seite, indem du ein leeres Image-Objekt erzeugst und dieses Objekt mit einem Inhalt seiner _src_-Eigenschaft versiehst, welcher der URL von deinem zu ladenden Bild entspricht.

```
bild = new Image();
bild.src = "urldesbilder.jpg";
```
lädt also die Datei in das Bildobjekt - *ohne* dass das Bildobjekt irgendwo in Form eines Bildelementes im HTML-Dokument auftaucht.

Es wird also schön im Hintergrund geladen - nun gilt es herauszubekommen, wann das Laden abgeschlossen wurde und dieses Event abzufangen, um evtl. weiteres folgen zu lassen.

Wenn eine Datei in ein Bildobjekt fertig geladen wurde, dann lässt sich das durch eine Userabfrage der Eigenschaft _complete_ des Bildobjektes feststellen - wenn diese den booleschen Rückgabewert _true_ liefert, dann wurde die URL komplett geladen, sollte ein _false_ beim Interpreter landen, dann ist's eben noch nicht vollständig geladen.

Fragt sich an dieser Stelle sicher aber noch, wie du eine Abfrage zum entsprechenden Zeitpunkt stellen kannst, an dem der Rückgabewert _true_ aber auch dementsprechend wahrscheinlich ist.

Jedes Image-Objekt als Instanz der Klasse _Image_ besitzt auch einen EventHandler _onLoad_, welcher genau dann feuert, wenn der Ladevorgang einer URL in eine Bildinstanz abgeschlossen wurde - egal ob erfolgreich oder nicht erfolgreich, der Event feuert erstmal!

Hier greifst du ein, indem du an dieser Stelle dem Event eine Funktion zuordnest, die zu diesem Zeitpunkt logischerweise eine Abfrage stattfinden lässt und weißt damit, ob dein Bild korrekt geladen wurde oder nicht:

```
function ladecheck(obj) {
    if (obj.complete) {
        alert("Heureka, geladen!");
    } else {
        alert("Shit, das war nix!");
    }
}

bild = new Image();
bild.src = "urldesbilder.jpg";
bild.onload = ladecheck(this);
```
Die Thematik "Fortschrittsbalken" muss ich hier nicht erklären, oder?

hth,
Geist


----------

