Automatic Ajax Loading Images With Prototype

Automatic Ajax Loading Images With Prototype

One of the benefits of using Ajax is that you don’t have to refresh the browser to update portions of a page. However the downside of this is if you have network lag for some reason, you could leave the user wondering if you application is working. It’s very frustrating to click on a button and have nothing happen. The obvious solution to this is my creating your own “loading…” image.

When I was faced with this problem for doodlekit, my website builder there were two things that bothered me about this solution. Number one, I didn’t want to have to call a JavaScript method that the beginning and end of every Ajax call. Number two, I didn’t want the loading box to flicker on and off if the request to less than a second or so. Thankfully these issues were fairly easy to solve with Prototype.

First create the image.

Pretty simple. If you’re looking for something a little fancier try http://www.ajaxload.info/

Next, a div to hold it.

<div id=”loading_box” style=”display:none”>

</div>
Notice that its hidden by default. Next we need the methods to show and hide this stuff.

var loaded = false;

function startLoading() {
loaded = false;
window.setTimeout(’showLoadingImage()’, 1000);
}

function showLoadingImage() {
var el = document.getElementById(”loading_box”);
if (el && !loaded) {
el.innerHTML = ‘image.gif’;
new Effect.Appear(’loading_box’);
}
}

The “loaded” variable helps to make sure that the loading box is not display after the Ajax call is complete. startLoading will be used to initiate the loading box. It first sets the loaded flag to false, so we know its still ok to display the loading box. It then sets a timeout on calling the method that actually shows the box. So it wont even try to show the loading box for at least one second.

The showLoadingImage method checks to see if the “loaded” variable has be set to true. If so, we know that the Ajax call is complete and we should not bother displaying the box. To display the box we first add the image tag to the div, and use a Scriptaculous effect to display it.

function stopLoading() {
Element.hide(’loading_box’);
loaded = true;
}

The stopLoading method simply hides the div and sets “loaded” to true. To re-iterate, this is just incase the Ajax call completes before the showLoadingImage method is called.

Now the only thing left is to automatically call these methods at the beginning and end of every Ajax call. Thats where Prototype comes in. Assuming you have the Prototype JavaScript file included, you can simply call the following.

Ajax.Responders.register({
onCreate : function(){

if(!$(’loadingBox’)){
loadingB = Builder.node(’img’,{src:’image.gif’, id:’loadingBox’, style: ”});
$(’id-where-you-will-insert-the-image’).appendChild(loadingB);
l = $(’loadingBox’); //fix for IE so we can hide
l.hide();
new Effect.Appear(’loadingBox’);
}
else
{
new Effect.Appear(’loadingBox’);
}
},
onComplete : function(){
l = $(’loadingBox’); //fix for IE so we can hide
new Effect.Fade(l);
}
});

After that the loading box will be displayed for any Ajax call lasting longer than one second.

Related posts:

1. Caching of images using javascript image object
2. Replacing images with time intervals using jquery
3. Displaying or changing images each day
4. Ajax Page With PHP
5. Water mark images using PHP 5 and GD Library
6. Simple Ajax with PHP click tracker
7. Loading swf file from another server using crossdomain.xml