Inhaltsverzeichnis
Welches Ziel soll erreicht werden?
Der Benutzer startet eine beliebige AJAX Aktion. Das können zum Beispiel sein: Formular absenden, Seite wechseln, ... .Die Ladegrafik soll dem Benutzer ein Feedback geben, dass noch etwas geschieht - dass wir für ihn arbeiten und sich das Warten lohnt.
Die Ladegrafik soll entsprechend dynamisch sein, damit der Benutzer nicht das Gefühl hat, dass die Seite langsam ist.
Wir sollten verhindern, dass der Benutzer den Link x-mal drückt und so unnötig Last erzeugt.
Außerdem muss die Grafik natürlich klein sein. Die Seite soll nicht schneller geladen werden als die Grafik
![;)](http://www.easy-coding.de/wcf/images/smilies/wink.png)
Grafik erstellen
Als Vorbereitung müsst ihr euch eine Grafik beschaffen. Ihr könnt die Grafik entweder mit GIMP, Photoshop & Co selbst erstellen oder aber den kostenlosen Webservice von ajaxload.info nutzen.easy-coding.de/Attachment/487/…68ec3c29656dae9132ec77135
AJAX Request bauen
Sobald ihr die Grafik habt und anfangen wollt zu programmieren, solltet ihr erst sicherstellen, dass ihr einen funktionierenden Prototypen habt. Erledigt niemals mehrere Schritt gleichzeitig, es sei denn ihr wisst was ihr tut.Ich stelle euch hier einen einfachen Prototypen zur Verfügung.
Zum testen habe ich eine PHP Datei "demo-wait-for-3sec.php" mit künstlicher Wartezeit erstellt. Diese ruft die Funktion sleep(3) auf.
Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <title>AJAX Loading Icon</title>
- <script type="text/javascript"><!--
- function sendRequest(linkref, target) {
- var req;
- try {
- req = window.XMLHttpRequest?new XMLHttpRequest():
- new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- // no AJAX Support
- }
- req.onreadystatechange = function() {
- if ((req.readyState == 4) && (req.status == 200)) {
- document.getElementById(target).innerHTML = req.responseText;
- }
- }
- req.open('post', 'demo-wait-for-3sec.php');
- req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- req.send('key=val');
- return false; // return false to avoid reload/recentering of the page
- }
- //-->
- </script>
- </head>
- <body>
- <div id="targetDiv">
- "Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
- <p><a href="#" onclick="return sendRequest(this, 'targetDiv')">weiter</a></p>
- </div>
- </body></html>
Bild in Ziel zeigen
Als nächstes wollen wir erreichen, dass die Ladegrafik im Zielcontainer eingehängt wird. Dazu erstellen wir eine Grafik im globalen JavaScript Scope. Von hier ist sie überall erreichbar.Sobald der Link geklickt wird hängen wir das Bild in den Zielcontainer ein. Um den hässlichen grauen Rahmen um den Link zu verhindern, wenden wir außerdem die Funktion blur() auf diesem Objekt an.
Quellcode
Ladegrafik wieder entfernen
Sobald die Inhalte fertig geladen wurden muss die Ladegrafik wieder entfernt werden. Das ist der einfachste Job dieses Tutorials, denn eigentlich müsst ihr nichts tun.Da der Inhalt des Ziel Containers mit der Antwort des AJAX Requests überschrieben wird und die Ladegrafik zum Inhalt gehört hat, wird diese automatisch überschrieben,
Optimierung
Schauen wir uns die Ziele an, die erreicht werden sollten, können wir noch nicht mit uns zufrieden sein. Wir wollen dem Benutzer ein besseres Feedback geben und verhindern, dass er weitere Angaben innerhalb dieses Containers machen kann. Dazu machen wir aus dem Bild ein Blockelement, skalieren es über die volle Höhe des Zielcontainers und machen es halbtransparent, damit die alten Inhalte noch durchschimmern.Quellcode
Damit das ganze funktioniert geben wir dem Zielcontainer noch die Eigenschaft position:relative.
Ergebnis
Der fertige Quellcode sieht nun folgendermaßen aus:Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <title>AJAX Loading Icon</title>
- <script type="text/javascript"><!--
- /**
- * @var loadingImg - precache the loading gif
- */
- var loadingImg = document.createElement('img');
- loadingImg.className = 'loadingIcon';
- /**
- * sends a request under usage of a loading graphic - targetDiv has to be positioned relative
- *
- * @param linkref - reference to the link element (will be blured)
- * @param target - reference to the target div, the content will be put in
- */
- function sendRequest(linkref, target) {
- linkref.blur();
- document.getElementById(target).appendChild(loadingImg);
- var req;
- try {
- req = window.XMLHttpRequest?new XMLHttpRequest():
- new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- // no AJAX Support
- }
- req.onreadystatechange = function() {
- if ((req.readyState == 4) && (req.status == 200)) {
- // it's not necessary to delete the img, cause the content
- // of the target div will be overwritten in the next line anyway
- // document.getElementById(target).removeChild(loadingImg);
- document.getElementById(target).innerHTML = req.responseText;
- }
- }
- req.open('post', 'demo-wait-for-3sec.php');
- req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- req.send('key=val');
- return false; // return false to avoid reload/recentering of the page
- }
- //-->
- </script>
- <style type="text/css">
- <!--
- .loadingIcon {
- display:block;
- position:absolute;
- left:0px;
- top:0px;
- width:100%;
- height:100%;
- opacity:0.75;
- filter:alpha(opacity=75);
- background-color:#6a7c87;
- background-image:url(ajaxload.gif);
- background-position:center center;
- background-repeat:no-repeat;
- }
- /* demostyle - not necessary to make it work*/
- body{font-size:11pt;font-family:Verdana,Arial,Sans}
- #targetDiv {width:300px;height:150px;border:1px solid #000;background-color:#efefef;padding:10px;}
- //-->
- </style>
- </head>
- <body>
- <div id="targetDiv" style="position:relative;">
- "Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
- <p><a href="#" onclick="return sendRequest(this, 'targetDiv')">weiter</a></p>
- </div>
- </body></html
Demo
Eine Online-Demo findet ihr unter demo.easy-coding.de/ajax/ajax-loading-icon/. Den Download aller Dateien gibt es unter demo.easy-coding.de/ajax/ajax-loading-icon/download.zipeasy-coding.de/Attachment/488/…68ec3c29656dae9132ec77135
15.224 mal gelesen