Schlagwort-Archive: Ladegrafik

Animierte Ladegrafik und Ajax

Auf loader generator kann man sich schnell und einfach nette animierte GIFs erstellen lassen. Das erspart einem die Suche, oder das Basteln mit Gimp und sie sind als Ladegrafiken meines Erachtens völlig ausreichend. Ein weiterer Generator findet sich (habe ihn nicht getestet) auf ajaxload.info. So kleine GIFs eignen sich auch gut für scripts diverser frameworks (Listung von über 200 Ajax frameworks).

So kann man es zum Beispiel aber auch einbauen:

Klicken Sie auf XMLHttpRequest aufrufen und warten Sie auf die Antwort.

zuerst ist da nix, bis der request aufgerufen wird

Bis eine Antwort auf den request kommt, kann man also gut ein animiertes GIF anzeigen, um die Wartezeit zu überbrücken. Ich habe den request im Beispiel einfach durch einen Zähler ersetzt.

warten!

warte!

Wenn dann eine positive Antwort kommt, wird der return Wert angezeigt, sonst eine Fehlermeldung.
Ich wende das zum Beispiel an, auf rate this oder rate that. 😉

Weblinks:
XMLHttpRequest
AJAX – Frische Ansätze für das Web-Design
AJAX
The XMLHttpRequest Object
Einen HttpRequest mittels Javascript erzeugen
Ladeanimationen
scriptaculous
Ajax Ladegrafik – Wie wird sowas eingebaut?
Dort liest man: „blende doch einfach das Bild ein, nachdem Du den request ausgeführt hast und onreadystatechange (also hiern zB in cb_show_pause) blendest Du es bei 4 wieder aus.
»» function get_pause(action,seconds) {
»» // XMLHttpRequest absetzen
»» if(XMLHTTP.readyState==4 || XMLHTTP.readyState==0) {
»» XMLHTTP.open("GET","get_xml_feed.php?action="+action+"&seconds="+seconds);
»» XMLHTTP.onreadystatechange = cb_show_pause;
»» XMLHTTP.send(null);
»» zeigeBild();
»» }
»» }


»» function zeigeBild() {
»» document.getElementById("DeinLadeBild").style.display = "block";
»» }

(600)