un Forastero <Webworking>
Ladebild-Anzeige (animiertes Gif) während Ajax-Requests
Mittwoch, 05 August 2009
Normalerweise läuft das Ganze so ab: Der Besucher klickt auf einen Button oder Ähnliches. Dann erscheint das animierte Ladebild, welches dem Besucher signalisiert, hab ein wenig Geduld, gleich kommt was. Sobald der Content geladen ist (der Request eine Antowrt liefert) muss das Bildchen wieder verschwinden.
Als Erstes schreiben wir uns ein kleines PHP-Script, welches requestet werden soll und nennen es abfrage.php. Wir lassen erstmal Datenbank-Abfragen und dergleichen beiseite. Damit das Script aber nach Aussen den Anschein erweckt, es sei schwer beschäftigt, schläfern wir es ein. sleep(3) hält die Ausführung des Scriptes für 3 Sekunden an, bevor weiter geparst wird. Dann erfolgt eine Text-Ausgabe per echo.
<?php
sleep(3);
echo 'hier kommt die Flut!!';
?>
Der HTML-Code ist easy. Wir brauchen einen Button, der auf Klick reagiert, und einen DIV-Container, in den das Ladebild bzw. der Content geschrieben wird. Achso, natürlich brauchen wir auch das animierte Ladebildchen. Wer das nicht selber entwerfen will, für den gibt es einen netten Online-Generator unter http://www.loadinfo.net
<button id="button"> Wann kommt die Flut? (bitte klicken) </button>
<div id="content"></div>
Den Request führen wir im 1. Fall mit jQuery aus. Trick 17 ist hier die Zeile $("#content").empty().html('...');, der Div mit der ID content wird angewiesen, wenn er leer ist (empty()), das anzuzeigen, was in html() steht. Und dort setzen wir das animierte Ladebild hinein. Die darauffolgende Zeile ist die Ajax-Abfrage, hier wird unser PHP-Script aufgerufen. Sind die 3 Sekunden rum und erfolgt die Text-Ausgabe, erhält der Request eine Antwort. Der Div mit der id content wird gefüllt, das Ladebild verschwindet.
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#content").empty().html('<img src="ladebild.gif" />');
$.get("abfrage.php", function(text){$("#content").html(text);});
});
});
</script>
dann testen wir das Ganze doch mal direkt hier:
Demo
Bei einem Ajax-Request über xmlHttp gibt es den sogenannten readyState. Wenn dieser 4 ist, ist die Antwort vom Script erfolgt. im Umkehrschluss, solange der readyState nicht 4 ist, solange können wir das Ladebild anzeigen lassen.
<script type="text/javascript">
var xmlHttp = false;
try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) { xmlHttp = false;}}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {xmlHttp = new XMLHttpRequest();}
function lade_Content(){
if (xmlHttp){
xmlHttp.open('GET', 'abfrage.php', true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState != 4) { // läuft gerade
document.getElementById("content").innerHTML = '<img src="ladebild.gif" />';}
if (xmlHttp.readyState == 4) { // vollständig
document.getElementById("content").innerHTML = xmlHttp.responseText;}
};
xmlHttp.send(null);
}}
</script>
<button onclick="lade_Content();" > Wann kommt die Flut? (bitte klicken) </button>
<div id="content"></div>