Page Loader with jQuery

Question

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

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.