Automatic Ajax Loading Images With Prototype

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.

Incoming search terms:

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

You will also be interested in ,

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