CSS, HTML und Javascript mit {stil}

Javascript Image

Javascript image object – loaded

Das Javascript Image-Objekt ist kein Bestandteil der Programmiersprache wie Date(), Array() oder String(), sondern gehört zum Document Object Model.

Das Image-Objekt hat keine Methoden, sondern nur Eigenschaften. Es macht also keinen Unterschied, ob das Bild mit document.createElement oder mit new Image angelegt wurde. Allenfalls könnte man ins Feld räumen, dass document.createElement() konsistenter ist.

Bilder können in Javascript als mit

var myImg = document.createElement('img');

oder mit

var myImg = new Image();

angelegt werden.

Image Properties

alt
Setzt das alt-Attribut oder gibt den Wert des alt-Attributs zurück
complete
Gibt zurück, ob der Browser das Bild geladen hat. complete ist kein Event!
crossOrigin
Setzt die CORS-Einstellung oder gibt sie zurück
height
Setzt die Höhe des Bildes oder gibt des Wert des height-Attributs zurück
isMap
Setzt ein Bild als Teil einer serverseitigen Image Map oder gibt zurück, ob das Bild Teil einer server-seitigen Image Map ist
naturalHeight
Gibt die (echte) Höhe des Bildes zurück
naturalWidth
Gibt die (echte) Breite des Bildes zurück. Das Bild muss vollständig geladen sein, bevor die Größe des Originals mit Javascript naturalHeight und naturalWidth bestimmt werden kann.
src
Setzt das src-Attribut des Bildes oder gibt des Wert des src-Attributs zurück
useMap
Setzt das useMap-Attribut des Bildes oder gibt den Wert des useMap-Attributs zurück
width
Setzt die Breite des Bildes oder gibt des Wert des width-Attriubts zurück
align, border, hspace, longDesc, name, vspace
nicht mehr in HTML5 vertreten

Javascript naturalWidth gehört zu den neuen Funktionen aus HTML5 und stellt die tatsächliche Größe eines Bildes fest.

IE unterstützt naturalWidth und naturalHeight ab Version 9

Javascript Abfrage: Bild geladen

Bilder werden geladen, nachdem ein HTTP-Request für das Bild abgesendet wurde. Das passiert entweder durch ein img-Tag oder durch einen Funktionsaufruf.

Wenn beim window.onload Event sind das DOM, CSS-Dateien und Bilder geladen. Das DOMContentLoaded Event feuert, wenn das HTML DOM vollständig geladen und navigierbar ist – ohne auf das Laden von CSS-Dateien, Bilder und iframes zu warten (ähnlich wie jQuery ready).

Ein »Preload« – das Laden von Bildern im Voraus – gibt es heute kaum noch. Bei den schnellen Verbindungen und schnellen Browsern ist diese Technik nicht mehr angebracht. Eher brauchen wir ein nachträgliches Laden, um z.B. nach einem Klick auf das Thumbnail-Bild eine größere Variante des Bildes zu laden.

Da aber bei großen Bildern doch eine kleine Weile ins Land geht, bis der Browser das Bild geladen hat, zeigen Galerien und Slideshows einen Spinner.

Javascript image loaded

Der HTML-Teil ist ganz einfach

<div id="veloprev">
   <img id="thumbnail" src="velo-tn.png" … />
   <div id="overlay"></div>
</div>
<script>
document.getElementById('thumbnail').addEventListener('click', function (e) {
   var lowRes = e.target.src;
   var overlay = document.getElementById('overlay');
   var highRes = new Image();
   var mySpinner = new Image();

Bilder können mit var highRes = document.createElement('IMG') angelegt werden oder mit var highRes = new Image();

   overlay.style.display = 'block';
   highRes.src = 'velo.png';
   overlay.appendChild(highRes);
   spinner.className = 'spinner';
   spinner.src = 'spinner.gif';
   overlay.appendChild(spinner);
   
   // Spinner entfernen, wenn das Bild geladen ist
   highRes.addEventListener ('load',function () {
      spinner.parentNode.removeChild(spinner);
   }, false);
   
   // Klick auf das Bild, um es wieder auszublenden
   highRes.addEventListener ('click',function () {
      overlay.style.display = 'none';
   }, false);
   
}, false);
</script>

naturalWidth / naturalHeight: Größe eines Bildes

Für Slideshows und die allgegenwärtigen Lightboxen ist es immer wieder erforderlich, die tatsächliche Größe eines Bildes herauszufinden.

Wenn Bilder kleiner oder größer in Webseiten gesetzt werden als in ihrer natürlichen Größe (z.B. damit sie in das Layout der Seite passen ), dann wird für die Darstellung in der Lightbox ihre richtige Größe gebraucht.

image size with Javascript
<img id="theImage" src="image.png" alt="image size" width="400" height="240">

var theImage = document.getElementById("theImage");
var width = theImage.width;
var height = theImage.height;

theImage.width und theImage.height liefern nur die aktuelle Größe.

var natWidth = theImage.naturalWidth;
var natHeight = theImage.naturalHeight;

naturalWidth und naturalHeight liefern die physikalische Größe des Bildes in den modernen Browsern (IE9, Firefox, Safari, Chrome und Opera).

var theImage = document.getElementById("theImage");
if (typeof theImage.naturalWidth == "undefined") {
	var i = new Image();
	i.src = theImage.src;
	var natWidth = i.width;
	var natHeight = i.height;
} else {
	var natWidth = theImage.naturalWidth;
	var natHeight = theImage.naturalHeight;
}