Prototype js: Einfache Javascript Loader Animation mit Overlay

In: Development|Gimmiks|Layout|PHP|Publick|Ruby on Rails|web2.0

24 Jun 2008

loaderWir haben den busy.js von Netzgesta für eine Loader Animation ausprobiert und waren mal begeistert von der einfachen Implementierung und vom Handling des Javascripts. Dabei wird der aktuelle DIV transparent überlagert und mit einer Loaderanimation versehen. Dennoch gab es zwei Probleme damit. Einerseits die Lizenzierung (was man noch verschmerzen könnte, aber der Igel in der Hosenztasche schreit trotzdem) andererseits, was schwerwiegender war, crashte das Skript im IE7 immer wieder unmotiviert. Die Seite funktionierte erst wieder nach einem Neustart des Browsers. Schlecht. Dann haben diese Art Loader Overlay mittels Prototype JS einfach selber gestrickt.


Natürlich haben wir nicht alle Features implementiert, sondern nur die welche wir brauchen: den Overlay bei einer Ajax Aktion. Loadergif muss nicht automatisch sein. Quick and Dirty aber funktioniert wunderbar.

Der Javascript-Funktion loaderimage wird als Parameter des bearbeiteten DIV übergeben. Dann legen wir eine schicke Gif-Loader-Animation inklusive Styles über den DIV:

JavaScript:
  1. function loaderimage(divID) {
  2.     var dimensions = $(divID).getDimensions();
  3.     var loaderimg = '<div align="center" id="loaderimg" style="
  4.            height:'+ dimensions.height +'px;
  5.            width:'+ dimensions.width +'px;
  6.            background: white;
  7.            filter:alpha(opacity=66);-moz-opacity:.66;opacity:.66;">
  8.            <img src="images/busyLoader.gif"
  9.            style="margin-top: '+ dimensions.height/2.5 +'px"/></div>';
  10.     Element.insert(divID, {top: loaderimg});
  11.     Element.absolutize('loaderimg');
  12. }

Verwendet haben wir es z.B. zusammen mit einem Prototype Ajax Request:

JavaScript:
  1. myAjax = new Ajax.Request( url,
  2. {
  3.     method: 'get',
  4.     parameters: params,
  5.     onLoading: loaderimage(divID)
  6.     onComplete: function(transport){
  7.         var html = transport.responseText || "";
  8.         Element.update(divID, html);
  9.     },
  10.     onFailure: function(){ alert('Something went wrong...') }
  11. }
  12. );

Das ist die schnelle Variante in der einfach der ganze DIV upgedatet wird. Natürlich kann man auch normal entfernen durch einen Aufruf von Element.remove('loaderimg');, aber dann ist es nicht mehr so quickndirty.

Comment Form

About this blog

Das ist die publick Tech & Biz Info Seite. Hier erscheinen regelmäßig News aus der Welt des Internets, Mobilfunk, Wireless, Wired, Plugged und Unplugged. Der Schwerpunkt liegt auf Entwicklung und herausfinden von neuen Trends.

Photostream

schau vorbei

LON/LAT Calculator for
any place in the world
* Enter Adress like "Street, City, Country"