Bild-Maße mit Javascript auslesen

(klicken zum vergrößern)

Bilder sind das Salz in der Suppe von Web-Seiten. So illustriere auch ich in diesem Web den ein oder anderen Beitrag mit einem Screenshot oder ähnlichem. Damit man auf dem Bild auch etwas erkennen kann, der Textfluss aber nicht durch ein großes Bild gestört wird, wird in solchen Fällen lediglich ein kleines Vorschaubild in den Text integriert und auf Mausklick öffnet sich das Originalbild in einem Pseudo-Dialog. Ein Beispiel ist die kleine Illustration hier gleich links.

Für diese Funktionalität verwende ich das jQuery-Plugin BlockUI und etwas zusätzliches Javascript, wobei immer beide Bilder geladen werden, aber nur das kleine Vorschaubild angezeigt wird. Die Anzeige des Originalbilds wird über die CSS-Anweisung display:none unterdrückt. Wird nun auf das Vorschaubild geklickt, werden die Masse des Originalbildes ausgelesen und für die korrekte Anzeige des Popups verwendet. Und genau da liegt bei manchen Browsern der Haken...

Normalerweise, so beschreibt es u.a. SelfHTML, kann man mit Javascript die Maße eines Bildes wie folgt auslesen:

<!-- Vorschaubild -->
<img src="images/vorschau.gif" onclick="showFullImage('original');">
<!-- Originalbild -->
<img src="images/original.gif" id="original" style="display:none">

<script type="text/javascript">

	function showFullImage (sID) {
    	var iHeight = document.images[sID].height;
    	var iWidth = document.images[sID].width;
    	//... Erstellen des Popups mit den Maßen des Originalbildes
    }

</script>

Das funktioniert in allen Gecko- (Firefox) und WebKit-Browsern (Safari) gut, aber nicht im Internet Explorer und in Opera, da das Bild nicht über die Attribute height und width verfügt. Die beiden geben schlichtweg 0 aus. Nun könnte man sagen "geb den Bildern doch einfach die Attribute", doch es geht auch anders. Der Trick ist, das Bild per Javascript in ein Image-Objekt zu laden und dann die Maße auszulesen:

<!-- Vorschaubild -->
<img src="images/vorschau.gif" onclick="showFullImage('original');">
<!-- Originalbild -->
<img src="images/original.gif" id="original" style="display:none">

<script type="text/javascript">

	var popupImg;

	function showFullImage(sID) {
		popupImg = new Image();
		popupImg.src = document.images[sID].src;
		waitUntilPopupImageLoaded();
    }

    function waitUntilOriginalImageLoaded() {
		if(popupImg.complete){
			var iHeight = popupImg.height;
			var iWidth = popupImg.width;
			//... Erstellen des Popups mit den Maßen des Originalbildes
		} else {
			setTimeout("waitUntilPopupImageLoaded();",100);
		}
    }

</script>

In der Methode showFullImage wird zunächst die globale Variable popupImg mit einem neuen Image-Objekt bestückt, in das dann über das src-Attribut das Originalbild geladen wird. Dieses liegt zwar schon im Cache, es ist jedoch besser erst dann mit der Darstellung des Popups fortzufahren, wenn absolut sicher ist, daß der Ladevorgang abgeschlossen ist. Dafür verzweigt der Code in die Methode waitUntilOriginalImageLoaded, die solange setTimeout aufruft, bis das Image-Objekt-Attribut complete den Wert true zurückliefert. Anschließend kann man sicher die Höhe und die Breite des Bildes ermitteln.