Javascript 如何为页面添加一组ajax加载指示器

我需要为页面添加一组ajax加载指示器。不同的div。我已经成功加载了一个ajax加载指示器

<script type="text/javascript">
$(".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>

---

提前感谢

据我所知，您希望使用一个加载程序处理一种ajax请求，另一个加载程序处理图像？ 如果是这种情况，那么可以使用options变量

$(".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();
    }
})

但是，如果我是您，那么在本例中，我将使用回调显示和隐藏指示器

$.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()}
      })

---

对于页面上的任何ajax活动，请尝试以下内容

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

---

请以问题的形式重新表述您的陈述，并添加更多细节。那么实际的问题是什么？如何为页面添加一组ajax加载指示器？我认为他想使用.ajax函数并附加一些回调。