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.

AJAX ist eine nette Sache! Dieses Akronym steht für „Asynchronous JavaScript and XML“ und ermöglicht unter anderem dynamisches Nachladen von Inhalten in die HTML Seite. Wer sich ganz genau dafür interessiert, kann ja auf WIKIPEDIA nachschauen

Natürlich findet man jetzt eine große Menge an Bibliotheken die man nutzen kann und sollte, aber hier möchte ich euch eine Quick and Dirty Lösung zeigen.

//AJAX Initialisieren und Funktionen zur Handhabung
var request = false;

// Request senden
function setRequest(url,send,irfunction) {
	// Request erzeugen
	if (window.XMLHttpRequest) {
		request = new XMLHttpRequest(); // Mozilla, Safari, Opera
	} else if (window.ActiveXObject) {
		try {
			request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
		} catch (e) {
			try {
				request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
			} catch (e) {}
		}
	}
		// überprüfen, ob Request erzeugt wurde
	if (!request) {
		alert("Kann keine XMLHTTP-Instanz erzeugen");
		return false;
	} else {
		// Request öffnen
		request.open('post', url, true);
		// Requestheader senden
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
		// Request senden
		request.send(send);
		// Request auswerten
		request.onreadystatechange = function() {
			interpretRequest(irfunction);
		}
	}
}
// Request auswerten
function interpretRequest(irfunction) {
	switch (request.readyState) {
		// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
		case 4:
			if (request.status != 200) {
				alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
			} else {
				irfunction();
			}
			break;
		default:
			break;
	}
}
//ENDE AJAX Funktionen

Wie verwendet man diese Funktionen nun richtig?

Angenommen wir haben eine Formular bei dem sich ein User registrieren muss und wir wollen checken ob der Nick schon vorhanden ist.

Dazu verwenden wir eine PHP Datei, die auf im selben Ordner liegt und abfrage.php heißt. Diese macht uns eine MYSQL Abfrage und liefert uns dann false zurück, wenn der Nickname schon vorhanden ist. Die 2 JavaScript Funktionen die wir zusätzlich noch in der HTML Datei brauchen sind folgende:

function check_name(nick) {
	//Request abschicken mit Post Variable Nickname
	setRequest("/abfrage.php","nickname="+nick,check_name_finish);
}
function check_name_finish() {
	var content = request.responseText;
	//Do something
}

Die Funktion check_name(nick) wird vom Inputfeld aufgerufen, wenn dieses nicht mehr beschrieben wird.  (siehe Code vom Inputfeld). Ist Funktion check_name(nick) mit der Ausführung fertig, wird Funktion check_name_finish() aufgerufen und ausgeführt. Diese hat nun in der Variable content die Antwort der Abfrage und kann nun darauf reagieren.

Und das Inputfeld würde so aussehen:

<input type="text" name="nickname" value="" onblur="check_name(this.value)">

Wie bereits erwähnt ist das hier nur Quick and Dirty! Getestet habe ich es mit den neuesten Versionen von IE und FireFox. Viel Spass damit!