Ladeanzeige

Im neuen Web 2.0 gibt es interaktive Veränderungen. Um dem User zu zeigen, das sich im Hintergrund der Website gearbeitet wird werden oftmals sogenannte „Loading-Indicators“, also Ladeanzeigen, genutzt um dies dem User zu zeigen.

Nun dazu wie man solche Ladeanzeigen verwirklicht. Zu allererst benötigt man eine Grafik die man als Anzeige verwenden kann. Hierzu gibt es den genialen Dienst namens Ajaxload (1)

Meistens wird als Loadingindicator einfach ein div verwendet das bei einem Ladevorgang eingeblendet und anschließend wieder ausgeblendet wird.

<div id="loading-indicator" style="display:none"><img ... /></div>

Soll dieser jetzt angezeigt werden wird einfach diese DIV auf visible geschaltet:

document.getElementById("loading-indicator").style.display='';

Um das ganze nach Abgeschlossen arbeiten wieder zu verstecken wird folgendes gemacht:

document.getElementById("loading-indicator").style.display='none';

Ein Problem das hier häufig auftritt ist, dass Requests nur wenige Millisekunden dauern. Dadurch entsteht ein Flackern. Hier gibt es die Möglichkeit das man einfach eine Mindestzeit einplant. Über den Vorteil oder Nachteil lässt sich streiten.

Folgender Code würde so eine Funktion erstellen

function toggleindicator(){
	//Diese Variable definiert wie lange der Indicator mindestens da sein soll.
	var timetowait = 2000;
	if(document.getElementById("loading-indicator").style.display=='none') {
		time = new Date().getTime();
		document.getElementById("loading-indicator").style.display='';
	} else {
		var vergangen = new Date().getTime() - time
		if( vergangen >=timetowait)
			document.getElementById("loading-indicator").style.display='none';
		else
			setTimeout("toggleindicator()",timetowait - vergangen);
	}
}

(1) http://www.ajaxload.info/ Ein Dienst zum erstellen von Loading Indicators