페이지에 아약스로드 표시기 세트를 추가하는 방법

Question

페이지에 아약스로드 표시기 세트를 추가해야합니다 (다른 DIV). 아약스로드 표시기를 성공적으로로드했습니다.

<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

페이지에있는 아약스 활동을 위해이

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