Ajax display loading image while page loads

Last updated on May 10th, 2016 at 01:32 pm

Ajax display loading image while page loads

It’s very frustrating to click on a button and have nothing happen. The obvious solution to this is to create 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.

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.