Um dem Benutzer zu visualisieren, dass gerade ein asynchroner HTTP Request ausgeführt wird, hat die AJAX Welt das ajax-loading.gif erfunden. Diese kleine animierte Grafik gibt es in vielen Varianten und bittet den Benutzer optisch darum zu warten, bis der Inhalt geladen wurde. Sinnvolle Sache, sonst klickt er sich nämlich doof und dusselig, falls es doch mal ein wenig länger dauert. Kurzerhand habe ich das auch mal hier in Form des springenden Punktes im Blog eingebaut.
Zuerst habe ich meinen Body-Tag mit einer ID versehen, damit ich mit Prototype einfach auf das Body-Element zugreifen kann.
<body id="body">
Dann habe ich ein kleines DIV samt Bild mit den CSS Eigenschaften “position:absolute” und “display:none” hinzugefügt. Das DIV kann mit Prototype so nämlich frei positioniert werden, wird aber vorerst nicht angezeigt.
<!-- Create hidden bouncing ball layer (ajax-loading.gif or similar) --> <div id="bouncer" style="position:absolute;display:none"><img src="/images/ball.gif" alt=""/></div>
Als nächstes wird ein Event-Handler an den Event “onmousemove” des Body-Tags geklebt. Der Handler ermittelt die aktuellen Maus-Koordinaten und platziert das (noch immer versteckte) DIV versetzt neben der Maus.
// Move the bouncing ball next to mouse cursor position
$('body').onmousemove = function( e ) {
mouseX = Event.pointerX( e );
mouseY = Event.pointerY( e );
$('bouncer').setStyle( { left: (mouseX+15) + 'px', top: (mouseY+15) + 'px' } );
return true;
}
Danach habe ich meine AJAX-Load Funktion noch so abgeändert, dass mit Beginn des Requests das DIV mit der Grafik angezeigt wird und bei Erfolg oder Fehler wieder versteckt wird. Anbei eine kleine Beispiel-Funktion.
// Example function to use the bouncer
function ajax_load( uri )
{
$('bouncer').show();
new Ajax.Request( uri, {
onSuccess: function( r ) {
$('bouncer').hide();
},
onFailure: function( r ) {
$('bouncer').hide();
}
});
}
Wirklich einfach, aber ein toller und ausnahmsweise auch mal sinnvoller Effekt. ;-)
