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.9 out of 10 based on 9 ratings

Incoming search terms:

• ajax loading image (6)
• ajax loading image tutorial (6)
• images change automatic ajax (4)
• how to change images using ajax and php (3)
• ajax loader image mysql tutorial (3)
• autmantic ajax call image (3)
• ajax loading image example (3)
• ajax loading script (3)
• show loading image php ajax (3)
• prototype ajax image (3)
• yii dropdownlist ajax demo (3)
• prototype loading (3)
• prototype ajax ajaxloader (3)
• prototype ajax loader image (2)
• prototype image loading js (2)
• refresh Images Using Ajax tutorial (2)
• ajax search and result php mysql (2)
• prototype loading request (2)
• how to call loading image in ajax (2)
• ajax loading image php (2)
• ajax simple image upload with loading (2)
• php prototype loading (2)
• ajax upload prototype (2)
• show loading image prototype ajax (2)
• ajax tutorial for dynamically loading images (2)
• run dll augy (2)
• simple ajax script refresh image (2)
• prototype Ajax Responders register funktioniert nicht (2)
• prototype flip effect (2)
• javascript how to add loading message while ajax is running prototype (2)
• change image new Ajax Updater prototype PHP (2)
• load images using ajax (2)
• ajax image files without refresh tutorial (2)
• display images using prototype (2)
• display record on keypress using ajax php (2)
• Automatic Ajax Loading Images With jquery (2)
• dynamic display images on HTML page from excel document with prototype (2)
• prototype loading-image (2)
• loading gif image using ajax in php (2)
• prototype ajax return image (2)

You will also be interested in ,

• Simple Ajax with PHP click tracker
• Ajax and Jquery
• Ajax Page With PHP