JavaScript/Window/Image()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Diee Eigenschaft Image() ist ein Prototyp, der dem <img>-Tag gleichkommt, aber nicht angezeigt wird


Beispiel
<!DOCTYPE HTML"> <html> <head> <title>Image</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!-- var imgs = ["http://wiki.selfhtml.org/mediawiki/images/7/79/Bett.jpg", "http://wiki.selfhtml.org/mediawiki/images/2/24/Kiefer.jpg", "http://wiki.selfhtml.org/mediawiki/images/b/b9/Schreibtisch.jpg", "http://wiki.selfhtml.org/mediawiki/images/7/70/Schaukelstuhl.jpg"]; //--> </script> </head> <body> <h1>Sehen sie sich die Bilder an!</h1> <script type="text/javascript"> <!-- for (var i = 0;i < imgs.length;i++) { document.write('<img src="http://wiki.selfhtml.org/mediawiki/images/3/30/Wait.gif"'+ 'id="'+imgs[i]+'" alt="[lädt]">'); var img = new window.Image(); img.onload = function () { document.getElementById(this.name).src = this.src; document.getElementById(this.name).alt = this.alt; } img.name = imgs[i]; img.alt = imgs[i]; img.src = imgs[i]; } --> </script> </body> </html>

Die Bildquellen werden in der Variable imgs gespeichert. Mittels einer for-Schleife wird für jeden Eintrag ein Lade-Bild (wait.gif) mittels document.write angezeigt. Zudem wird ein Bild mitels window.Image erstellt. Dieses kommt, wie oben erwähnt, einem <img>-tag gleich, wird aber nicht angezeigt. Es hat aber alle Eigenschaften eines solchen. Somit kann der onload-EventHandler mit einer Funktion befüllt werden, die demnach aufgerufen wird, sobald das Bild geladen ist. Dann wird das Pendant im Dokument mittels document.getElementById angewählt und diesem die korrekten Eigenschaften für alt und src übergeben (Zu diesem Zeitpunkt ist das Bild im Cache und kann sofort angezeigt werden). Somit wird während des Ladens ein Lade-Bild angezeigt.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML