JavaScript und Bilder Beispiel 2: Mit JavaScript Bilder vorladen

Auf dieser Seite wird gezeigt, wie Sie Bilder mit JavaScript vorladen können. Dies ist immer dann interessant, wenn Bilder kurzfristig als Reaktion auf bestimmte Aktionen angezeigt werden müssen. Wurden diese Bilder bereits automatisch nach Laden der HTML-Seite mit entsprechendem JavaScript Code nachgeladen, so treten keine unnötigen Wartezeiten beim Auswechseln von Bildern auf. Benötigt wird eine solche Funktion zum Beispiel bei einem JavaScript Menu, bei dem im Falle des Auftretens eines onmouseover-Events über einem Bildelement einzelne Bilder, welche die Menupunkte darstellen, ausgetauscht werden müssen.

Das für solche Zwecke nötige vorladen von Bildern soll hier anhand eines einfachen Beispiels demonstriert werden. Wenn Sie mit der Maus über das IMG-Element gehen – das Bild wird nach dem Laden der Seite als Text „BILD” angedeutet –, dann wird das zuvor geladene Bild in diesem Element angezeigt. Dass das Bild wirklich schon geladen wurde können Sie sehen, wenn Sie vor dem Überfahren mit der Maus die Internetverbindung trennen. Klicken Sie mit der Maus auf den Link unterhalb des Bildes, so wird im Statusfeld der Ladestatus und die Größe des Bildes angezeigt.

Beim ersten Laden der Seite werden noch keine Bilddaten zur Verfügung stehen (Angezeigt wird der Status false und für die Bildgröße 0x0). Stehen hier nach einem erneuten Laden der Seite bereits Werte, so liegt dies daran, dass das Bild noch im Browser-Cache abgelegt ist und nicht mehr geladen werden muss. Leeren Sie den Browser-Cache und laden Sie die Seite erneut (oder klicken Sie alternativ mit gedrückter Shift-Taste auf den Browserbutton „neu Laden” in Ihrem Browserfenster) um das Script erneut auszuprobieren.

Im unteren Script-Code wird neben dem IMG-Tag ein SPAN-Element für die Statusanzeige und ein Link, die zur Aktualisierung der Statusanzeige dient, erzeugt. Danach wird ein Image-Objekt erzeugt, welches die URL des anzuzeigenden Bildes zugewiesen bekommt. Unmittelbar nachdem diese Zuweisung erfolgt ist, wird durch den Browser auch das Nachladen des Bildes eingeleitet.

Als nächstes wird die Funktion show_status definiert. Die Funktion show_status soll die aus dem Image-Objekt extrahierten Bilddaten im Statusfeld anzeigen. Auch das Statusfeld wird über seine ID angespochen. Hier kommt wieder die Methode getElementById zum Einsatz, mit dessen Hilfe ein Verweis auf das Element ermittelt wird. GetElementById gehört zum Document-Object und ist eine von vielen JavaScript-Objekten, die im Zuge der Einführung des DOM zu den von JavaScript unterstützten Objekten hinzugefügt wurde.

Zum Thema JavaScript-Event finden Sie in der Beschreibung des Event-Object nähere Informationen. Auch die einzelnen unter JavaScript definierten Events werden jeweils getrennt demonstriert (siehe onLoad-Event und onClick-Event - auch hier sind kommentierte Beispiele zu finden).

Gefällt Ihnen das Bild? Zu sehen ist der Blick auf eine Bucht in Oia auf Santorin. Das im Beispiel gezeigte Foto ist nur einer von vielen Eindrücken, die auf www.KunstundReisen.de in vielen Fotogalerien auf Sie warten. Dieses und weitere Fotos wurden uns freundlicherweise für unsere Beispiele zur Verfügung gestellt.

<img id="platzhalter" onmouseover="document.getElementById ('platzhalter').src = bild.src" alt="BILD"><br>
<span id="status">-</span><br>
<a href="javascript:show_status ()" title="">Status aktualisieren</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Bildobjekt erzeugen
var bild = new Image ();
// URI für das Bild setzen
// Das Bild wird dadurch umgehend vom Browser nachgeladen
bild.src = '/javascript-demos/java-script-galerie/photos/oia_k.jpg';

// Funktion gibt den Status des Ladevorgangs im oben definierten SPAN-Element aus
function show_status () {
  // Eigenschaften des Bildobjekts ausgeben
  document.getElementById ('status').firstChild.nodeValue = 'Bild vollstaendig geladen: ' + bild.complete +
                  ' - Breite und Hoehe: ' + bild.width + 'x' + bild.height;
}

// Direkt nach Laden der Seite wir die Statusinformation zum Ladevorgang aktualisiert
show_status ();
// -->
</script>

-
Status aktualisieren

« zurück zu Seite 1 weiter zu Seite 3 4 5 6 7 »