호출에서 jQuery 다중 아약스 로딩 애니메이션

Question

페이지에서 나는 다른 Ajax 호출을 묶는 다른 요소를 가지고 있습니다. 예를 들어, 하나의 a.click이 x.php를 요청하고 있고, 다른 하나는 같은 페이지에서 y.php를 요청합니다.

내가하고 싶은 것은 각각에 대해 개별로드 이미지를 배치하는 것입니다. ajaxStart와 ajaxStop은 어느 것이 호출 되든 매번 해고되기 때문에 수행하지 않습니다.

그래서 개별 통화를 위해 어떻게 할 수 있습니까?

Answer 1

이 같은 개별 $.ajax 호출에 beforeSend 및 complete 콜백을 사용할 수 있습니다

$.ajax({ 
    url: 'myPage1.html', 
    beforeSend: function() { 
    $("#loading1").fadeIn(); 
    }, 
    success: function(data) { 
    //Current code 
    }, 
    complete: function() { 
    $("#loading1").fadeOut('fast'); 
    } 
}); 


$.ajax({ 
    url: 'myPage2.html', 
    beforeSend: function() { 
    $("#loading2").fadeIn(); 
    }, 
    success: function(data) { 
    //Current code 
    }, 
    complete: function() { 
    $("#loading2").fadeOut('fast'); 
    } 
}); 

See here for a full list of available callbacks