Ladebild-Anzeige (animiertes Gif) während Ajax-Requests
Mittwoch, 05 August 2009 1 Kommentar
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>
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Genau nach sowas hab ich gesucht! Das fehlt mir noch in meinen Tools. Auf so eine Ladeanzeige sollte man nicht verzichten, wenn einem nicht der Server abschmieren soll. Ich hatte keine drin und die User klicken auf die Buttons wie verrückt und die Scripte im Hintergrund werden x-mal ausgeführt...also Loader nutzen! Weiter so!