如何爲頁面添加一組Ajax加載指標

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