HTML-CSS Image Preload - Bilder vorladen

Es gibt zahlreiche Möglichkeiten Bilder einer Website im Vorfeld der Darstellung zu laden, damit diese den Seitenaufbau nicht stören. In diesem Tutorial möchte ich Ihnen eine Möglichkeit zeigen, wie Sie ganz ohne Rückgriff auf Javascript oder andere Methoden nur mit CSS und XHTML Bilder vorladen können.

Diese Methode hat den Vorteil, dass Sie zum einen auch bei Usern funktioniert, die Javascript deaktiviert haben und zum zweiten auch in älteren Browsern zum gewünschten Ergebnis führt.

Warum Bilder vorladen?

Nicht jede Website benötigt die Integration einer Preload/Vorlade Technik. Man sollte bei der Gestaltung der Website besonders auf die Größen der zu ladenden Dateien achten (Scripte, HTML, CSS und besonders Bilder). Dies ist einerseits vorteilhaft für die Benutzer Ihrer Website, die bei zu langen Ladezeiten die Website im Regelfall wieder verlassen. Zum anderen achten auch Suchmaschinen seit einiger Zeit verstärkt auf die Performance von Websites und crawlen schnell ladende Sites besser (öfter und tiefer), als Websites mit sehr langen Ladezeiten.

Manchmal kommt es allerdings vor, dass man sehr große Bilder entweder als Element des Layouts oder als Präsentationsmittel auf der Website darstellen möchte. In diesen Fällen empfielt sich der Rückgriff auf eine Preload Technik, um den flüssigen Seitenaufbau für die Benutzer zu gewährleisten.

CSS Image Preload - Bilder vorladen - der Code

Um das Problem des Preloadings besser zu verstehen muss man sich die Lade-Reihenfolge der Elemente vergegenwärtigen:

1. XHTML
2. CSS
3. Grafikdateien der Site
4. CSS Grafiken (Background Images)

Grafikdateien auf der Website haben also eine höhere Lade Priorität als die CSS Background Images, was einen weiteren Anwendungsfall dieser Technik eröffnet. Gerade die moderen Websites im Web 2.0 Stil arbeiten häufig mit sehr großen Background Images, die man ebenfalls mit dieser Methode vorladen könnte.

Die Methode ist denkbar einfach: Wir erstellen ein DIV mit der ID 'preload', in das wir die vorzuladenden Bilder einfügen. Mittels CSS verstecken wir in einem 2. Schritt dieses DIV Element.

Die Bilder werden also unsichtbar für den Besucher bereits beim Aufruf der DIVs 'preload' vorgeladen und stehen dann beim eigentlichen Inhalt der Website zur Verfügung.

HTML Code

Sie sollten das DIV am Anfang des HTML Codes einfügen, damit es vor dem eigentlichen Seiteninhalt geladen wird.

CSS Code

Zwar genügt vielen Browsern schon DISPLAY:NONE, um die Bilder wie gewünscht zu verstecken, einige ältere Browser stellen die Grafiken dann allerdings als kleine schwarze Punkte dar.

Daher verkleinern wir zusätzlich die Bilder (height und with: 0), entfernen Ihren Rahmen (border: none) und positionieren sie absolut am unteren linken Bildschirmrand, um den gewünschten Effekt in allen Browsern zu erzeugen.