CSS

Bilder-Preload übers Stylesheet

(msc) Bekanntlich kann man in CSS Elemente über die Eigenschaft «Display» unsichtbar machen: Indem man dieser den Wert «none» zuweist. Dies ermöglicht es, dass beispielsweise beim Drucken einer Seite das (auf Papier logischerweise wenig hilfreiche) Navigationsmenü weggelassen wird. «Display» lässt sich aber auch zum Preload von Bildern einsetzen.

Der Preload von Bildern soll den Seitenaufbau beschleunigen, indem Bilder vorab in den Cache des Browsers geladen werden und bei Bedarf ohne lange Ladezeit zur Verfügung stehen. Der klassische Weg für den Bilder-Preload führt über Javascript. Somit funktioniert diese Methode auch nur auf Browsern, in denen Javascript aktiviert ist. Eine Alternative ist das Vorab-Laden von Bildern via CSS: Sie ist wiederum geeignet für die Verwendung mit neueren Browsern.

Der Trick soweit ist simpel: Im Style­sheet wird eine Regel für unsichtbare Bilder formuliert:

<style type=»text/css»>
.preload {display:none;}
</style>

Nun bindet man Aufrufe für die vorab zu ladenden Bilder auf der Hauptseite ein. Wichtig: Der Aufruf sollte am Ende der Seite stehen, damit der Preload erst einsetzt, wenn die Seite fast komplett beim Surfer angekommen ist. Und natürlich werden die vorab zu ladenden Bilder jetzt mit der Klasse «preload» ausgestattet:

<img src=»RiesenHelgen.jpg» class=»preload»>