Bilder mit JavaScript preloaden
Ich versuche momentan eine kleine und simple Galerie zu Programmieren. Ein PHP Script soll die Bilder aus eine Verzeichnis auslesen und dann mit Lightbox anzeigen. Der Nachteil von Lightbox ist aber, dass es erst funktioniert, wenn die Seite komplett geladen ist. Und wenn es da mehrere Bilder gibt, kann das Laden der Seite auch mal länger dauern und die wenigsten Besucher wollen da warten.
Ich versuche diese Problematik nun mit einem Preloader zu umgehen. Bisher ohne grossen Erfolg. Aber immerhin weiss ich jetzt, wie man Bilder mit JavaScript "preloadet."
Recht simpel. Es wird ein neues Objekt erstellt und danach mit src die Quelle der Datei zugewiesen. Natürlich kann man so mit PHP auch mehrere Bilder preloaden.
Ich versuche diese Problematik nun mit einem Preloader zu umgehen. Bisher ohne grossen Erfolg. Aber immerhin weiss ich jetzt, wie man Bilder mit JavaScript "preloadet."
<script language="JavaScript" type="text/javascript">
<!--
if (document.images)
{
preload_obj=new Image();
preload_obj.src="images/test.jpg";
}
//-->
</script>Recht simpel. Es wird ein neues Objekt erstellt und danach mit src die Quelle der Datei zugewiesen. Natürlich kann man so mit PHP auch mehrere Bilder preloaden.
Kommentare
Frank J.
07.08.07 13:06
An der Lösung für dieses Lightbox-Problem wäre ich ja auch interessiert ;)Grüße
F.
Philipp L
22.08.07 09:49
Lösung gibts! ;)ich hab die bilder dynamisch aus einer DB - diese fügen sich in einer tabelle oder einem div aneinander.
mit javascript funktionen kann man abfragen ob das letzte bild aus der reihe geladen wurde und dann die pixlist auf sichtbar setzen. ich hab im unteren beispiel noch einen preloaderplatzhalter so wie ihn lightbox verwendet gebaut, dieser wird auf unsichtbar gesetzt sobald die bilderliste geladen ist. keine schöne lösung, aber sie funktioniert ganz gut.
ach ja, blockbox() muss natürlich im body onload geladen werden.
function blockbox() {
var lastimg=document.images.length;
if (document.images[lastimg].complete == true) {
document.getElementById("loaderlist").style.display='none';
document.getElementById("pixlist").style.display='block';
}
}
lg, Phil.