Vorausladen (Preloading) von Grafiken

ist ein typischer Fall für javascript, wenn Grafiken in einer Webseite bei Bedarf zügig ausgetauscht werden sollen, ohne daß eine sichtbare Verzögerung entsteht.

Das Vorausladen der Grafiken sieht in der Regel so aus:

Einer Variablen wird per "new Array()" ein neues Imageobjekt zugewiesen (objektorientier Ansatz von javascript, mit Vererbung und so, ganz toll und sehr super).

Anschließend wird der src.Eigenschaft des neuen Bildobjektes Pfad und Name der Grafik-Datei zugewiesen - fertig.

	bild1 = new Image();
	bild1.src = "red2.gif";

Manchmal sieht man auch Beispiele, in denen eine größere Anzahl an Grafiken per Arrays referenziert wird:

	var bildnamen = new Array();         // Datenfeld zur Aufnahme der Namen der Grafik-Datei
	var bildobjekte=new Array();         // Datenfeld zur Aufnahme der Javascript-Bildobjekte

	bildnamen[0] = "bgslide.jpg";
	bildnamen[1] = "bgslide2.jpg";
	bildnamen[2] = "bgslide3.jpg";

	for (i=0; i < bildnamen.length; i++)
	{
		bildobjekte[i]=new Image();
		bildobjekte[i].src=bildnamen[i];
	}

Hier ein paar Beispiele:

In der Spielwiese wird per <body onLoad="Preload();"> ein Javascript angestoßen, in dem die per CSS angezeigten Hover-Grafiken vorausgeladen werden.
Da online (zumindest im IE4) bei den Grafiken, die nur einmal enthalten waren, trotzdem ein Flackern zu sehen war, wurden in dem Script auch die Erst-Link-Grafiken per javascript "angezogen".
Ein kleines Beispiel dafür, wie kryptischer Javascript-Code aussehen kann, wie er von Anwendungen wie z.B. Dreamweaver automatisch erzeugt wird.
Zur Ehrenrettung sollte gesagt sein, daß diese Routinen sehr ausgereift sind und in vielen Browsern laufen.
Dieser Link zeigt noch mal das Preloading in seiner einfachsten Form.
Da alle enthaltenen Grafiken mehr als einmal enthalten sind, reicht es aus, nur die CSS-Hover-Grafiken per Javascript vorauszuladen.
slidebg.js zeigt ein Array-Beispiel, daß auf dieser Seite betrachtet werden kann.
preload.js zeigt (nur für IE) ein Array-Beispiel, in dem eine große Anzahl Bilder geladen und schnell ausgetauscht werden.
Ein Zusammenspiel zwischen Javascript und CSS, um zu zeigen, daß Rollover auch teilweise in CSS und mit geringem Grafikaufwand realisiert werden können.