AJAX Ladegrafik

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • AJAX Ladegrafiken zeigen während die Daten geladen werden

    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 ;)

    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/…5a68a6f1af296a7d7dd938cdd

    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.

    Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <title>AJAX Loading Icon</title>
    6. <script type="text/javascript"><!--
    7. function sendRequest(linkref, target) {
    8. var req;
    9. try {
    10. req = window.XMLHttpRequest?new XMLHttpRequest():
    11. new ActiveXObject("Microsoft.XMLHTTP");
    12. } catch (e) {
    13. // no AJAX Support
    14. }
    15. req.onreadystatechange = function() {
    16. if ((req.readyState == 4) && (req.status == 200)) {
    17. document.getElementById(target).innerHTML = req.responseText;
    18. }
    19. }
    20. req.open('post', 'demo-wait-for-3sec.php');
    21. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    22. req.send('key=val');
    23. return false; // return false to avoid reload/recentering of the page
    24. }
    25. //-->
    26. </script>
    27. </head>
    28. <body>
    29. <div id="targetDiv">
    30. "Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
    31. <p><a href="#" onclick="return sendRequest(this, 'targetDiv')">weiter</a></p>
    32. </div>
    33. </body></html>
    Display All


    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.

    Source Code

    1. var loadingImg = document.createElement('img');
    2. loadingImg.src = 'ajaxload.gif';
    3. function sendRequest(linkref, target) {
    4. linkref.blur();
    5. document.getElementById(target).appendChild(loadingImg);
    6. var req;
    7. try {
    8. ...
    9. }
    10. }
    Display All


    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,

    Source Code

    1. req.onreadystatechange = function() {
    2. if ((req.readyState == 4) && (req.status == 200)) {
    3. document.getElementById(target).innerHTML = req.responseText;
    4. }
    5. }


    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.

    Source Code

    1. .loadingIcon {
    2. display:block;
    3. position:absolute;
    4. left:0px;
    5. top:0px;
    6. width:100%;
    7. height:100%;
    8. opacity:0.75;
    9. filter:alpha(opacity=75);
    10. background-color:#6a7c87;
    11. background-image:url(ajaxload.gif);
    12. background-position:center center;
    13. background-repeat:no-repeat;
    14. }
    Display All


    Damit das ganze funktioniert geben wir dem Zielcontainer noch die Eigenschaft position:relative.

    Ergebnis

    Der fertige Quellcode sieht nun folgendermaßen aus:

    Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <title>AJAX Loading Icon</title>
    6. <script type="text/javascript"><!--
    7. /**
    8. * @var loadingImg - precache the loading gif
    9. */
    10. var loadingImg = document.createElement('img');
    11. loadingImg.className = 'loadingIcon';
    12. /**
    13. * sends a request under usage of a loading graphic - targetDiv has to be positioned relative
    14. *
    15. * @param linkref - reference to the link element (will be blured)
    16. * @param target - reference to the target div, the content will be put in
    17. */
    18. function sendRequest(linkref, target) {
    19. linkref.blur();
    20. document.getElementById(target).appendChild(loadingImg);
    21. var req;
    22. try {
    23. req = window.XMLHttpRequest?new XMLHttpRequest():
    24. new ActiveXObject("Microsoft.XMLHTTP");
    25. } catch (e) {
    26. // no AJAX Support
    27. }
    28. req.onreadystatechange = function() {
    29. if ((req.readyState == 4) && (req.status == 200)) {
    30. // it's not necessary to delete the img, cause the content
    31. // of the target div will be overwritten in the next line anyway
    32. // document.getElementById(target).removeChild(loadingImg);
    33. document.getElementById(target).innerHTML = req.responseText;
    34. }
    35. }
    36. req.open('post', 'demo-wait-for-3sec.php');
    37. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    38. req.send('key=val');
    39. return false; // return false to avoid reload/recentering of the page
    40. }
    41. //-->
    42. </script>
    43. <style type="text/css">
    44. <!--
    45. .loadingIcon {
    46. display:block;
    47. position:absolute;
    48. left:0px;
    49. top:0px;
    50. width:100%;
    51. height:100%;
    52. opacity:0.75;
    53. filter:alpha(opacity=75);
    54. background-color:#6a7c87;
    55. background-image:url(ajaxload.gif);
    56. background-position:center center;
    57. background-repeat:no-repeat;
    58. }
    59. /* demostyle - not necessary to make it work*/
    60. body{font-size:11pt;font-family:Verdana,Arial,Sans}
    61. #targetDiv {width:300px;height:150px;border:1px solid #000;background-color:#efefef;padding:10px;}
    62. //-->
    63. </style>
    64. </head>
    65. <body>
    66. <div id="targetDiv" style="position:relative;">
    67. "Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
    68. <p><a href="#" onclick="return sendRequest(this, 'targetDiv')">weiter</a></p>
    69. </div>
    70. </body></html
    Display All


    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.zip
    easy-coding.de/Attachment/488/…5a68a6f1af296a7d7dd938cdd
    Images
    • ajaxload.png

      13.29 kB, 446×263, viewed 5,074 times
    • screenshot.png

      4.09 kB, 322×172, viewed 885 times

    10,311 times viewed