Question

我需要为页面添加一组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>

提前感谢！

Answer 1

据我所知，你想使用一个加载器来处理一种ajax请求，而另一个加载器可以说是图像吗？如果是这种情况，那么您可以使用选项变量

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

Answer 2

对于您网页上的任何ajax活动，请尝试以下

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

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

2 个答案: