Grafiken vorladen - HTML, CSS, Javascript

Da ich immer wieder feststelle, dass beim Hovereffekt beim Menu mit Bildern einige Grafiken erst ewig geladen werden müssen, möchte ich hier mal ein paar Tipps zum Grafiken vorladen geben. Ich selber habe es bisher auch nicht gemacht, aber es sieht einfach besser aus wenn es kein ruckeln gibt. Ich habe 3 Möglichkeiten gefunden um die Bilder vorzuladen. Es gibt die Möglichkeiten mit HTML, CSS und Javascript zu arbeiten.

Die Grafiken werden bei den Varianten einfach in den Browsercache geladen und dann später wieder herausgeholt. Dadurch sind die Bilder schon vor dem Aufrufen der Grafik verfügbar. Natürlich ist das Vorladen nicht nur für den Hovereffekt wichtig, sondern auch für Seiten mit vielen Bildern. Da lädt man die Bilder auf Seiten mit weniger Ladezeit vor und wenn die Seite mit den Bildern kommt, werden die Bilder einfach aus den Browsercache geholt.

Folgende 3 Möglichkeiten um eine Frafik vorzuladen gibt es:

Grafik vorladen mit HTML

<img src=”grafik.jpg” width=”1″ height=”1″ border=”0″ alt=”" title=”" />

Der Code sollte vor dem anschließenden Body-Tag(</body>) eingebunden werden, um keine Fehler zu verursachen. Am besten außerhalb von Tabellen und anderen HTML-Tags. Wichtig sind bei dem HTML-Code die Angabe der Höhe und Breite. Die werden einfach auf 1 gesetzt und dadurch ist die Grafik nicht sichtbar.

Grafik vorladen mit CSS

.vorladen {
display:none;
height:0px;
width:0px;
}

Mit einer CSS Anweisung kann man die Bilder ganz einfach verstecken. display:none ist der entscheidende Befehl, um die Grafiken zu verstecken. Natürlich muss man dem Bild auch die nötige CSS-Klasse zuweisen:

<img src=”grafik.jpg” alt=”" title=”" class=”vorladen” />

Eigentlich ganz leicht umzusetzen und wie ich finde die beste Lösung. Die Variante erzeugt einen sauberen Code und ist in allen Browsern möglich. Man könnte statt display:none natürlich auch visibility:hidden nehmen, dass ist jeden selbst überlassen. Außerdem könnte man die CSS Anweisung auch direkt in den img-Tag schreiben:

<img src=”grafik.jpg” alt=”" title=”" style=”display:none;width:0px;height:0px;” />

Hat denselben Effekt wie die CSS-Klassen, aber der Quellcode wird dadurch größer was wiederum die Ladezeit verlängert.

Grafik vorladen mit Javascript

<script language=”JavaScript”>
<!–
var bild = new Image();
bild.src = “grafik.jpg”;
//–>
</script>

Die Variante mit Javascript ist auch sehr leicht umzusetzen. Man gibt durch die Anweisung bekannt, dass die Grafiken zur Webseite gehören. Die Grafiken werden dann in den Browsercache geladen und sind dann verfügbar. Wenn man mehr Grafiken vorladen will, dann muss man einfach die 2 Zeilen kopieren und die Variable so verändern:

<script language=”JavaScript”>
<!–
var bild = new Image();
bild .src = “grafik.jpg”;
var bild1 = new Image();
bild2 .src = “grafik_1.jpg”;
//–>
</script>

Die Variante mit Javascript würde ich persönlich nicht einsetzen, weil die Möglichkeit mit CSS sauberer ist. CSS kann im Gegensatz zu Javascript nicht abgeschaltet werden und funktioniert deswegen überall.

Ich hoffe dem ein oder anderen hilft dieses kleine Tutorial, um Grafiken auf der Webseite vorzuladen. Sie machen eine Webseite nebenbei auch noch schöner, weil man auf Grafiken nicht ewig warten muss bzw. beim Mouseover das Bild nicht ruckelt.

Informationen zum Blogartikel "Grafiken vorladen - HTML, CSS, Javascript"

• veröffentlicht am Donnerstag, 18. September 2008 um 12:15.
• Tags: bilder, css, grafiken, HTML, images, javascript, ladezeit, preload, tutorial, vorladen
• Blog-Kategorie: Webdesign
• Weiteres: RSS 2.0 | Antwort hinterlassen | Trackback

Ähnliche Beiträge im Webdesign Blog

• kostenlose Flash Galerien - Flash Slideshows
• kostenlose Bilder für die Webseite
• Typografie für Webdesigner
• Coole Ordner, Mail und Tüten Icons
• Seo Menu durch Ul- und Li-Tags