Es gibt bereits sehr viele Scripte die Bilder vorladen mit oder ohne Statusanzeige.

Allerdings sind mir diese oft zu groß oder gewesen oder haben nur alle Bilder geladen die bereits über einen <img> Tag in der Homepage waren. Ich brauchte aber ein sehr kleines Script, da es auf mobilen Endgeräten ausgeführt werden sollte. Und es sollte nicht automatisch alle Bilder laden sondern erst auf Knopfdruck.

Leider habe ich dann nichts mehr passendes gefunden, deshalb habe ich mir folgende Funktionen selber geschrieben.

Das preloading wird erst ausgelöst wenn man die Funktion startPreloading() aufgerufen wird. Dann wird der Browser durch das erzeugen eines neuen Bilders und dem zuweisen einer URL dazu veranlasst dieses Bild zu laden. (Eigentlich erst durch das zuweisen der URL)

Über das Attribut “complete” kann nun überprüft werden ob das Laden beendet ist. Ein counter zählt die fertigen durch. Sind alle fertig geladen, dann wird die Funktion doSomething() aufgerufen. Wichtig dabei ist, dass man die 250ms pause beibehält. Denn wenn man keine Pause einbaut, erzeugt man ein Script, welches den Browser blockiert bis es fertig ist!

//Liste der Bilder
var global_imageList = new Array("bild1.jpg","bild2.jpg","bild3.jpg");
//Funktion die das Preloading startet
function startPreloading(){
	//Statusmeldung aktualisieren
	document.getElementById("status").innerHTML = "Lade Bilder für Animation...";
	pictures = new Array();
	if(global_imageList != null && global_imageList.length > 0){
		//Jedes Bild laden
		for(i=0;i<global_imageList.length;i++){
			tmp_img = new Image();
			tmp_img.src = url;
			pictures[i] = tmp_img;
		}
	}
	//Funktion zum kontrolieren aufrufen
	preloading(pictures);
}

function preloading(pictures){
	counter = 0;
	for(i=0;i<pictures.length;i++){
		if(pictures[i].complete){
			counter++;
		}
	}
	//Wenn alle Bilder geladen sind
	if(counter == pictures.length){
		//Jetzt sind alle Bilder geladen, also:
		doSomething();
	//Sonst status
	} else {
		document.getElementById("status").innerHTML = "Lade Bilder für Animation... ("+counter+"/"+pictures.length+")";
		//Eine Pause einlegen, sonst bleibt das Script hängen
		setTimeout(function(){preloading(pictures);},250);
	}
}

Das Script ist nun auch einfach anzupassen. Man muss nur die global_Imagelist mit seinen Bildern einfügen. Die Statusanzeige Passiert als text, indem der <div> Block mit dem Namen “Status” verändert wird.