Javascript Image

Javascript image object: Abfrage, ob ein Bild im Browser geladen ist

Das 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 createElement oder mit new Image angelegt wurde. Allenfalls könnte man ins Feld räumen, dass createElement konsistenter ist.

Bilder können in Javascript als mit

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

oder mit

var myImg = new Image();

angelegt werden.

Eigenschaften: 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 vollständig geladen hat. complete ist kein Event!, sondern gibt true oder false zurück.
crossOrigin
Setzt die CORS-Einstellung (Cross Origin) 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 (physikalische) Höhe des Bildes zurück
naturalWidth
Gibt die (physikalische) 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 (ab IE9).
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-Attributs zurück
align, border, hspace, longDesc, name, vspace
veraltet und nicht mehr in HTML5 vertreten

Javascript Abfrage: Bild fertig 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.

Beim window onload Event ist das DOM, CSS-Dateien und Bildern geladen. Das DOMContentLoaded Event hingegen feuert bereits, 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).

Da bei sehr großen Bildern eine Weile ins Land gehen kann, bis der Browser das Bild vollständig geladen hat, zeigen Galerien und Slideshows einen Spinner.

buffalo-mini

Der HTML-Teil ist ganz einfach

Thumbnail, Overlay und Spinner
<div id="buffalo">
   <img id="thumbnail" src="buffalo-mini.jpg">
	
   <div id="overlay"></div>
	
   <div class="spinner"><svg><use xlink:href="#wheel"/></svg></div>
</div>

Der Spinner ist ein SVG, könnte aber ebensogut ein animiertes GIF oder CSS (z.B. von 50+ CSS Loader Animation Snippet and Examples) sein.

document.getElementById('thumbnail').addEventListener('click', function (e) {

    var overlay = document.getElementById('overlay');
    var spinner = document.querySelector(".spinner");

    highRes = new Image();
    spinner.setAttribute("style","display:block");

    // zuerst den Listener für das Laden des Bildes
    highRes.addEventListener ('load', function () {
        spinner.parentNode.removeChild(spinner);
        overlay.appendChild(highRes);
    });
	
    // entfernt das hochauflösende Bild bei einem Klick
    highRes.addEventListener ('click',function () {
        highRes.parentNode.removeChild(highRes);
        overlay.parentNode.appendChild(spinner);
        overlay.style.display = 'none';
        spinner.setAttribute("style","display:none");
    });
	
    overlay.style.display = 'block';
	
    // src erst nach dem Aufsetzen des Listeners angeben
    highRes.src = "buffalo.jpg";

});

Image Preload mit Javascript

Wenn ein Image Objekt erzeugt wurde und dem Objekt eine URL zugewiesen wird, lädt der Browser das Bild in seinen Cache, z.B. um das Bild später bei einem Klick auf einen Button oder nach längerem Scrollen ohne Verzögerung anzuzeigen.

<script>
var myImage = new Image();
myImage.src = 'einbild.jpg';
</script>

An dieser Stelle hat der Browser das Bild in den Cache geladen und das Image-Objekt myImage enthält das Bild einbild.jpg.

Heute kann allerdings ein Link mit rel="preload" im Head der Seite Ressourcen (Bilder, CSS, Scripte) elegant nach dem Laden der Seite im Voraus laden, z.B. um sie erst später auf der Seite zu zeigen oder auszuführen.

<link rel="preload" as="image" href="largemap.png" media="(max-width: 600px)">

Alle modernen Browser, Safari ab Version 11, aber nicht IE und nicht Microsoft Edge.

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;
}

Bilder als DataURL laden

Bilder als DataURL laden

Bild auf den Server laden und speichern: Nicht mit Javascript, dafür wird ein PHP-Script auf dem Server gebraucht und ein HTML form-Tag mit action="uploadImage.php" und enctype="multipart/form-data".

<?php
   $targetFile = 'uploads/' . basename($_FILES["file"]["name"]);

   if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
     // Datei hochgeladen
   }
?>
Javascript image object