Warte Image

[Marlene]

Hallo,

ich hätte eine Frage zur Eingabe in eine Form, wenn ich einen Namen in ein input- TextFile eingebe dann hol ich mir per AJAX daten vom Server.
Ich möchte nun dazu ein image haben (das, welches sich im Kreis dreht) und wenn die Antwort vom Server gekommen ist, soll dieses Image wieder verschwinden.
Weiß jemand wo ich so ein Image herbekomme und wie ich das mit AJAX/jQuery am einfachsten machen kann?
.lg
Marlene

[Take]

Moin,

ich hätte eine Frage zur Eingabe in eine Form, wenn ich einen Namen in ein input- TextFile eingebe dann hol ich mir per AJAX daten vom Server.
Ich möchte nun dazu ein image haben (das, welches sich im Kreis dreht) und wenn die Antwort vom Server gekommen ist, soll dieses Image wieder verschwinden.
Weiß jemand wo ich so ein Image herbekomme

http://www.ajaxload.info/

und wie ich das mit AJAX/jQuery am einfachsten machen kann?

Mit jQuery eine Klasse an ein Element hängen und dann per CSS dieser Klasse das Loading-Bild als Hintergrund geben.

Gruß,
Take

[Marlene]

Versteh ich jetzt nicht ganz, hättest du da vielleicht ein Beispiel, wie ich das machen könnte?
lg
Marlene

[suit]

Versteh ich jetzt nicht ganz, hättest du da vielleicht ein Beispiel, wie ich das machen könnte?

Wie man Suchmaschinen bedient, weißt du aber schon?
http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/

[Georg]

Hallo,

Weiß jemand wo ich so ein Image herbekomme und wie ich das mit AJAX/jQuery am einfachsten machen kann?

Ich versuch mal anhand eines beispiels das ich mal geschrieben hatte:
Wenn dein Konstrukt schon steht ist folgendes nötig

1. Du brauchst ein animiertes gif
2. Ein leer gif

  
  
function loadData( additionalData ) {  
	    document.getElementById("loadingImg").src = "loading.gif";  
//HIER BEIM START DEINER FUNKTION DAS LADE GIF EINBINDEN  
       	if (xmlHttp) {  
			xmlHttp.open('GET', 'seite.php?rand=' + Math.random(), true);  
           var requestTimer = setTimeout( function() {  
                try{  
                    xmlHttp.abort();  
                }catch(e){  
                }finally{  
                    xmlHttp = false;  
                    initAjax();  
                    window.clearTimeout(runLoadData);  
                    runLoadData = window.setTimeout("loadData('')", 30000);  
                }  
                return;  
            }, 45000);  
			xmlHttp.onreadystatechange = function () {  
				if (xmlHttp.readyState == 4) {  
				    try{  
				        if (xmlHttp.status == 200) {  
//HIER DANN BEIM ABFRAGEN DES HTTP STATUS DEIN LEER GIF SOBALD STATUS 200 ERREICHT IST  
				            document.getElementById("loadingImg").src = "/spacer.gif";  
				            clearTimeout(requestTimer);  
				            document.getElementById("data").innerHTML = xmlHttp.responseText;  
				            updateData( additionalData );  
				            window.clearTimeout(runLoadData);  
				        }  
                    }catch( e ){  
                        xmlHttp.abort();  
                        xmlHttp = false;  
                        initAjax();  
                    }finally{  
                        window.clearTimeout(requestTimer);  
                        runLoadData = window.setTimeout("loadData('')", 30000);  
                    }  
				  
				}  
			};  
		xmlHttp.send("");  
		}  
	}  
  

War das verständlich? Den Rest der Funktion kannst du ignorien. Wichtig ist hier nur, dass du die entsprechenden gif an den ensprechenden STellen in deiner Funktion einbindest.