Automatic Ajax Loading Images With Prototype

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.

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.

Automatic Ajax Loading Images With Prototype, 7.5 out of 10 based on 11 ratings

Incoming search terms:

• ajax loading image (8)
• ajax loading image tutorial (6)
• images change automatic ajax (4)
• ajax select symfony2 (4)
• prototype ajax image (3)
• ajax loading script (3)
• prototype loading (3)
• prototype ajax ajaxloader (3)
• prototype while loading display image (3)
• autmantic ajax call image (3)
• ajax loading image example (3)
• yii dropdownlist ajax demo (3)
• prototype 2 on load (2)
• ajax loading images (2)
• change image new Ajax Updater prototype PHP (2)
• javascript in textfield in yii framework (2)
• Automatic Ajax Loading Images With jquery (2)
• ajax upload prototype (2)
• simple ajax script refresh image (2)
• show loading image prototype ajax (2)
• ajax search and result php mysql (2)
• prototype ajax return image (2)
• prototype Ajax Responders register funktioniert nicht (2)
• symfony2 2 select list ajax (2)
• prototype ajax loader image (2)
• prototype flip effect (2)
• ajax image files without refresh tutorial (2)
• yii message box (2)
• refresh Images Using Ajax tutorial (2)
• loading gif image using ajax in php (2)
• run dll augy (2)
• load images using ajax (2)
• EJB INSERT IMAGE DATABASE(PDF) (2)
• yii dropdown onchange (2)
• display images using prototype (2)
• loading image while ajax call prototype javascript (2)
• prototype loading-image (2)
• yii ajax dropdownlist onchange (2)
• display blob ajax (2)
• javascript how to add loading message while ajax is running prototype (2)

You will also be interested in ,

• Ajax and Jquery
• Simple Ajax with PHP click tracker
• Ajax Page With PHP
• Simple auto suggest script using ajax php css and tags from wordpress
• Tag cloud using php, mysql and ajax with filter
• Autosuggestion / Autocomplete script using PHP and Ajax