jQuery ajax loading widget

Jquery

Even though i’ve been using jQuery to make web apps for quite a while, this simple function passed me by until quite recently.

When loading data asynchronously, the end user doesn’t get any feedback that anything is actually happening (unless you display a loading gif or something similar). This can often lead to the user clicking repeatedly and risking things fucking up. I usually would include an animated loading gif next to the call to action, initially hidden by CSS, and then using jQuery would display it when the call to action was clicked. After the response was received I would set the gif back to hidden. This worked perfectly fine, but would result in numerous gifs over the page (while still small, still take time to load).

jQuery actually has a built in function for detecting when an Ajax call is started and when it ends. With this in mind it’s really easy to invoke some action when this happens. In around six lines of jQuery, a few lines of HTML and CSS we can make a pretty nifty slide down loading message (a bit similar to Google).

I suppose it would help if you knew what the hell I was on about, so here is a little video of the script in action (the web app is ReviewSpace – a really clever file sharing and collaboration tool that i’m working on) (it’s a bit quick but you should be able to make out the yellow loading box slide down from the top of the screen)

ReviewSpace ajax loader demo from Gas Street Works on Vimeo.

So now you know what is happening, you probably want to know how to do it.

The ajaxStart() function is called when jQuery detects an ajax call. By binding this to the whole document, it gets triggered after any ajax call in the page. When this is called we slideDown a div containing our loading text.

When the ajaxEnd() function is triggered, we slideUp the same div, in effect showing and then hiding our loading text. Simples!

jQuery

$(document).ajaxStart(function() {

$('#loading_display_holder').slideDown("fast");

});

$(document).ajaxStop(function() {

$('#loading_display_holder').slideUp("fast");

});

HTML

<div id="loading_display_holder">

<div id="loading_display">

loading...

</div>

</div>

CSS

#loading_display_holder{

position: fixed;

display: none;