✔ Bild zu Beginn der Funktion anzeigen und zum Ende wieder ausblenden

[Manuel Hegemann]

Hallo zusammen,

ich möchte zu Beginn meines XMLHttpRequests();, also eigentlich noch kurz vorher, ein Bild einblenden, was dem Benutzer anzeigt, "Seite wird geladen...", also ein übliches Loading-GIF.
Nach Abarbeitung des Scriptes, also nachdem die Daten jetzt für den Benutzer angezeigt werden, soll dieses Bild wieder ausgeblendet werden.

Das Problem: Der Abarbeitungsvorgang des Scriptes. Es sieht so aus, als würde er das Einblenden und Ausblenden des Bildes erst nach Bearbeitung des XMLHttpRequests(); durchführen, da kein Bild angezeigt wird. Kommentiere ich den Code für das Ausblenden des Bildes aus, zeigt er es an...

Gibt es also eine Möglichkeit es zu "erzwingen", dass erst das Bild angezeigt wird und erst dann der XMLHttpRequest(); durchgeführt wird und dann... naja... dann eben das Bild wieder ausgeblendet wird?

Hier mal mein Code...

function getDir(changeDir, windowId, columnId, sessname, sessid) {
	var loaderDiv = document.getElementById('loader_' + windowId);
	loaderDiv.style.visibility = "visible";
	
	try {
		req = new XMLHttpRequest();
	} catch (e) {
		try {
			req = new ActiveXObject('Msxml2.XMLHTTP');
		} catch (e){
			try {
				req = new ActiveXObject('Microsoft.XMLHTTP');
			} 
			catch (failed){
				req = null;
			}
		}  
	}

	req.open('POST', '../modules/ajax/getDir.php', 'true');

	req.onreadystatechange = function() {            
		switch(req.readyState) {
			case 4:
				if(req.status!=200) {
					alert("Fehler: " + req.status); 
				} else {    
					var finderDiv = document.getElementById('window_' + windowId);
					finderDiv.innerHTML = req.responseText;
				}
				break;
			default:
				return false;
				break;     
		}
	}

	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send('changeDir=' + changeDir + '&windowId=' + windowId + '&columnId=' + columnId + '&' + sessname + '=' + sessid);

	loaderDiv.style.visibility = "hidden";
}

Danke im Voraus für Eure Antworten und viele Grüße aus Frankfurt,
BigManu

 

[Quaese]

Hi,

wenn das Bild erst ausgeblendet werden soll, nachdem der Request beendet wurde, musst du das Ausblenden in der Callback-Funktion onreadystatechange anstossen.

req.onreadystatechange = function() {            
  switch(req.readyState) {
    case 4:
      if(req.status!=200) {
        alert("Fehler: " + req.status); 
      } else {    
        var finderDiv = document.getElementById('window_' + windowId);
        finderDiv.innerHTML = req.responseText;
        loaderDiv.style.visibility = "hidden";
      }
      break;
    default:
      return false;
      break;     
  }
}

Ciao
Quaese

 

[Manuel Hegemann]

Argh, vielen Dank. Funktioniert wunderbar