How to add set of ajax loading indicators for a page

I need to add set of ajax loading indicators for a page.(different DIVs).I have successfully loaded one ajax loading indicator.

<script type="text/javascript"&g开发者_JAVA技巧t;
$(".loader").bind("ajaxSend", function () {
    $(this).show();
}).bind("ajaxStop", function () {
    $(this).hide();
}).bind("ajaxError", function () {
    $(this).hide();
});

</script>

<div class="loader" style="display: none;">
<img id="img-loader" src="images/loading.gif" alt="Loading" />
</div>

Thank in advance!

As I understood, you want to use one loader for one kind of ajax requests, and another for lets say images? If that is the case, then you can use options variable

$(".loader").bind("ajaxSend", function (e, xhr, opt) {
    if(opt.url == '/some_url/'){
        $(this).show();
    }
})

$(".loader2").bind("ajaxSend", function (e, xhr, opt) {
    if(opt.url == '/some_other_url/'){
        $(this).show();
    }
})

However if I were you, then in this case I would show and hide indicators using callbacks.

$.ajax({'url': '/some_url/',
        'beforeSend': function(){$('.loader').show()},
        'success':function(){$('.loader').hide()}
      })

$.ajax({'url': '/some_other_url/',
        'beforeSend': function(){$('.loader2').show()},
        'success':function(){$('.loader2').hide()}
      })

For any ajax activity on your page try this

$(document).ajaxStart(function(){ 
  $('.loader').show(); 
}).ajaxStop(function(){ 
  $('.loader').hide();
});