Home › Projekte ›

jQuery Loading Animation (Drupal + Non-Drupal)

Die Ladegrafik steht nicht zur allgemeinen Verfügung. Bitte eigene Grafik verwenden, siehe Link unten im Beitrag.

Das Projekt jQuery Loading Animation ist als "Nebeneffekt" einer unserer Softwareentwicklungen, gemeinsam mit Thomas Frobieter entstanden.

Benutzer werden schnell ungeduldig, wenn eine Seite mal etwas länger lädt und Ladeanimationen tragen dazu bei, diese Wartezeit psychologisch zu verkürzen.

Ich habe einige Zeit nach einer Standard-Lösung gesucht, komischerweise aber, obwohl ich dies für ein typisches Problem halte, keine wirklich gute Lösung gefunden.

Kurzum habe ich das beigefügte jQuery-Snippet entwickelt. Dies ist sowohl für Drupal als auch für jede andere Website (Hinweis beachten!) innerhalb weniger Minuten nutzbar.

Installationshinweise:

  1. Snippet & CSS in die Website einbinden (jQuery benötigt!)
  2. Grafikpfad und gegebenenfalls Design anpassen
  3. Es empfiehlt sich, die verwendete Grafik auch im Footer der Seite versteckt ("style="display:none;") abzulegen, damit sie entsprechend vorgeladen wird.
  4. Nutzen!

Übrigens freue ich mich auch über Hinweise zu alternativen Lösungen oder weitere Verbesserungsvorschläge.

Hinweis für den Drupal-Einsatz:

  • Das Snippet beachtet bereits Übersetzungen ("Loading")
  • Ihr könnt die JS-Datei über die .info-Datei eures Themes einbinden: Zeile: "scripts[] = js/loading.js" hinzufügen und Datei entsprechend im Theme-Verzeichnis (Ordner "js") ablegen
  • Vergesst nicht, auch JQuery (beispielsweise über ein Modul) einzubinden!

UPDATE:
Ich habe diese Funktionalität nun in einem Drupal 6 und einem Drupal 7 Modul umgesetzt, das ihr hier herunterladen könnt (aktuell leider noch Sandbox!). Sollte aber voll einsatzfähig und stabil sein.
http://drupal.org/sandbox/Anybody/1373998

Hinweis für den Nicht-Drupal-Einsatz:

  • Bitte entfernt die "Drupal.t('loading')"-Methoden!! Hier geht es nur um Übersetzungen. Einfach durch euer Übersetzungssystem oder einfachen Text ersetzen!

Script-Code:

  1. $("document").ready(function(){
  2.         //Initialisieren
  3.         Loadinganimation.init();
  4. });
  5.  
  6.  
  7. var Loadinganimation = {
  8.         imgSrc: '/path/to/ajax_load_big.gif',
  9.         init: function(){
  10.                 //Anwenden auf alle Links außer JS-Links, interne Links und solche mit der Klasse ".noLoadingAnimation"
  11.                 $("a[href]").not("a[href=javascript:;]").not("a[href=#]").not(".noLoadingAnimation").each(function(i, element){
  12.                         //Nur Elemente, die keine JS-Events haben (TODO: Nur click-events beachten)
  13.                         if(typeof $(element).data("events") == 'undefined' || $(element).data("events").length==0){
  14.                                 $(element).click(function(eventObject){
  15.                                         //Nicht bei Öffnen in neuem Tab (Strg+Klick)
  16.                                         if (!eventObject.ctrlKey) {
  17.                                                 Loadinganimation.show();
  18.                                         }
  19.                                 });
  20.                         }
  21.                 });
  22.                
  23.                 //Bei Formularversand auch ausfuehren, wenn keine anderen Events registriert sind.
  24.                 $("form").submit(function(){
  25.                         console.log($(this).data("events"));
  26.                         if(typeof $(this).data("events") == 'undefined' || $(this).data("events").length==0){
  27.                                 Loadinganimation.show();
  28.                         }
  29.                 });
  30.                
  31.                 //Bei Klick auf die Animation ausblenden
  32.                 $("div#loadinganimation").click(function(){            
  33.                         Loadinganimation.hide();
  34.                 });
  35.                
  36.                 //Bei ESC wieder ausblenden
  37.                 document.onkeydown = function(e){
  38.                 if (e == null) { // ie
  39.                   keycode = event.keyCode;
  40.                 } else { // mozilla
  41.                   keycode = e.which;
  42.                 }
  43.                 if(keycode == 27){ // escape, close box
  44.                         Loadinganimation.hide();
  45.                 }
  46.             };
  47.         },
  48.         /**
  49.          * Zeigt die Ladegrafik als Layer über der Seite.
  50.          */
  51.         show: function(){
  52.                 //Nur einblenden, wenn nicht bereits eingeblendet!
  53.                 if($("div#loadinganimation").length==0){
  54.                         $("body").append(
  55.                                 '<div id="loadinganimation"><div class="border"></div><div class="inner"><img class="first" src="'+Loadinganimation.imgSrc+'" alt="'+Drupal.t('Loading')+'..." /><img class="second" src="'+Loadinganimation.imgSrc+'" alt="'+Drupal.t('Loading')+'..." /><img class="third" src="'+Loadinganimation.imgSrc+'" alt="'+Drupal.t('Loading')+'..." /><br />'+Drupal.t('Loading')+'...</div><div class="border"></div></div>'
  56.                         );
  57.                 }
  58.         },
  59.         /**
  60.          * Versteckt die Ladegrafik über der Seite.
  61.          */
  62.         hide: function(){
  63.                 $("div#loadinganimation").remove();
  64.         }
  65. }

CSS-Code (Achtung, CSS 3 - könnt ihr gerne anpassen!):

  1. /* Page Ladebalken */
  2.  
  3. #loadinganimation{
  4.         box-shadow:18px -10px 20px rgba(0, 0, 0, 0.2), 18px 10px 20px rgba(0, 0, 0, 0.2);
  5.         position:fixed;
  6.         width:100%;
  7.         z-index:999;
  8.         top:25%;
  9.         left:0;
  10.         text-align:center;
  11.         color:#000;
  12.         font-weight:bold;
  13.         font-size:0.8em;       
  14.         cursor:wait;
  15. }
  16.  
  17. #loadinganimation .inner{
  18.         background: -moz-linear-gradient(left center, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.4));
  19.         border-color:#c6c6c6;
  20.         border-width:1px 0;
  21.         border-style:solid;    
  22.         padding:10px 0;
  23. }
  24.  
  25. #loadinganimation .border{
  26.         background: -moz-linear-gradient(left center, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1.0));
  27.         height:10px;           
  28. }
  29.  
  30. #loadinganimation .first,
  31. #loadinganimation .third{
  32.         opacity:0.15;  
  33.         height:80px;
  34.         margin-bottom:10px;
  35.         -moz-transform: skew(-25deg);
  36. }
  37.  
  38. #loadinganimation .first{
  39.         -moz-transform: skew(25deg);
  40. }


Nutzungshinweis / Lizenz:
Creative Commons Lizenzvertrag
jQuery Loading Animation Snippet von Julian Pustkuchen steht unter einer Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

p. S.: Eigene Ladegrafiken erhaltet ihr hier: http://www.ajaxload.info/

AttachmentSize
loading.css950 bytes
loading.js2.23 KB
Example Screenshot77.72 KB

Comments

NewBitOrder's picture

Funktioniert gut, vielen Dank

Submitted by NewBitOrder (not verified) on 21. September 2011 - 15:59.

Funktioniert gut, vielen Dank fürs Veröffentlichen!
Grüße aus Koblenz

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><blockquote>
  • Lines and paragraphs break automatically.
  • Pairs of<blockquote> tags will be styled as a block that indicates a quotation.
  • You can enable syntax highlighting of source code with the following tags: <c>, <cpp>, <css>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <smarty>, <xml>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Textual smileys will be replaced with graphical ones.
  • Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.

More information about formatting options

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung, Ablaufoptimierung und Usability bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.
Er besitzt einen Abschluss als B.Sc. Wirtschaftsinformatik (dual) und studiert derzeit für seinen Abschluss als Master of Science Wirtschaftsinformatik.

Entwickelt Julian gerade keine Software, fährt er Ski, Mountainbike, spielt Badminton, segelt oder verbringt Zeit mit Freunden.

Dieser Blog dient als sein "öffentlicher Notizblo(ck/g)".

Zufallsfoto

Webbasierte Lösungen? Machen wir!

webks: websolutions kept simple - Webdesign aus Porta Westfalica

webks: websolutions kept simple
http://www.webks.de