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.
PHP:
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:
PHP:
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
