Page Loader with jQuery

Question

Hi Gurus,

What Im looking to do is something called 'loader' using jQuery.

Basically on site after choosing one option site will search database and will return matching results. All that is happening without refreshing the page.

Im looking to add "loader" - image that will appear while site is loading data from database and don't really know where to start.

Can someone please give me some clues, maybe plug ins or just refer me to some sites that have the solution?

Regards

Answer 1

You could either monitor for an AJAX event (http://docs.jquery.com/Ajax), such as ajaxStart (http://docs.jquery.com/Ajax/ajaxStart) or ajaxComplete (http://docs.jquery.com/Ajax/ajaxComplete) and bind an action to that event, such as show and hide.

$('#myLoaderImage').ajaxStart(function(){
    $(this).css('display', 'block');
});
$('#myLoaderImage').ajaxComplete(function(){
    $(this).css('display', 'none');
});

OR. You could do this.

$('#myLoaderImage').css('display','block');

$('#someDiv').load('somePage.html', function(){
   $('#myLoaderImage').css('display','none'); 
});

So what you would be doing is showing the loader right before you start your ajax call, and hiding it in the callback function that gets run after the ajax call is complete. The first method is probably better because you can monitor for global ajax events and hide/show the loader image for any ajax event.

Answer 2

Just put an image with a loading indicator image somewhere on the site:

<img src="loader.gif" alt="" style="display:none" id="loader-indicator" />

Then use this javascript to show this right before the Ajax call fire's, then hide it again after it is finished.

$('#loader-indicator').show();
$.ajax({
    url:'ma/url',
    success: function(){
        $('#loader-indicator').hide();
    },
    error: function(){
        $('#loader-indicator').hide();
    }
});

If you need loading indicator images, I'd try http://www.ajaxload.info/. But it seems to be temporary unavailable.