Chức năng thực thi sau khi tất cả các yêu cầu ajax .load() được hoàn thành

Question

Tôi có một trang có bộ tab. Mỗi tab được tải bởi hàm jQuery .load().

Tôi muốn hiển thị hoạt ảnh tải biến mất khi tất cả các yêu cầu ajax được hoàn tất. Tuy nhiên, document.ready() chỉ cung cấp cho tôi thành công hạn chế.

Làm cách nào để đảm bảo rằng tất cả yêu cầu ajax được hoàn thành trước khi thực thi mã để ẩn hoạt ảnh tải?

Answer 1

ajaxComplete

mỗi tài liệu:

$('.log').ajaxComplete(function() { 
    $(this).text('Triggered ajaxComplete handler.'); 
}); 

Answer 2

Sử dụng callback lập luận để .load(), thiết lập một lá cờ hoặc tăng bộ đếm trong hàm callback. Khi tất cả cờ được đặt hoặc bộ đếm đạt đến số lượng tab, bạn biết tất cả các tab đã được tải và bạn có thể xóa hoạt ảnh.

Trong giả mà có thể hoặc không có thể có giá trị JavaScript:

loadedTabs = 0; 

function onLoad() { 
    for (int i = 0; i < numTabs; ++i) { 
     tabs[i].load(tabUrl(i), tabLoaded); 
    } 
} 

function tabLoaded() { 
    ++loadedTabs; 
    if (loadedTabs == numTabs) 
     loadingAnimation.display = 'none'; 
} 

Answer 3

.ajaxStop(handler) 

Tài liệu ở đây: http://api.jquery.com/ajaxStop/

Answer 4

Nhìn vào bài đăng này và câu trả lời ... https://stackoverflow.com/a/13090589/999958

Một hữu ích workaround cho tôi: Nhìn vào ajaxCallComplete() gọi trong mỗi .complete (...);

$(document).ready(function(){ 
    loadPersons(); 
    loadCountries(); 
    loadCities(); 
}); 

// Define how many Ajax calls must be done 
var ajaxCalls = 3; 
var counter = 0; 
var ajaxCallComplete = function() { 
    counter++; 
    if(counter >= ajaxCalls) { 
      // When all ajax calls has been done 
     // Do something like hide waiting images, or any else function call 
     $('*').css('cursor', 'auto'); 
    } 
}; 

var loadPersons = function() { 
     // Show waiting image, or something else 
    $('*').css('cursor', 'wait'); 

    var url = global.ctx + '/loadPersons'; 
    $.getJSON(url, function(data) { 
      // Fun things 
    }) 
    .complete(function() { ajaxCallComplete(); }); 
}; 

var loadCountries = function() { 
    // Do things 
    var url = global.ctx + '/loadCountries'; 
    $.getJSON(url, function(data) { 
      // Travels 
    }) 
    .complete(function() { ajaxCallComplete(); }); 
}; 

var loadCities = function() { 
    // Do things 
    var url = global.ctx + '/loadCities'; 
    $.getJSON(url, function(data) { 
      // Travels 
    }) 
    .complete(function() { ajaxCallComplete(); }); 
}; 

Hy vọng có thể giúp ...

Answer 5

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_beginRequest(BeginRequestHandler); 
prm.add_endRequest(EndRequestHandler); 

function BeginRequestHandler(sender, args) { 
    $modal.show(); 
    $overlay.show(); 
} 

function EndRequestHandler(sender, args) { 
    $modal.hide(); 
    $overlay.hide(); 

} 

Answer 6

$(document).ready(function() { 
    $(document).ajaxComplete(function() { 
     alert('Completed'); 
    }); 
}); 

Answer 7

Về cơ bản, tôi có gần như tương tự về vấn đề này, mà tôi muốn tải một lưới sau khi hoàn thành tải 2 hộp combo và lúc kết thúc Tôi muốn tải một mạng lưới, vì vậy tôi đã giải quyết như vậy

function LoadGrid1() 
    { 
     //ajax1 load first dropbox 
    } 

    function LoadGrid2() 
    { 
     //ajax2 load Second dropbox 
    } 

    function LoadGrid() 
    { 
     //ajax3 load Grid after complete the two drops loading... 
    } 

    $(document).ready(function() { 
     LoadGrid1(); 
     LoadGrid2(); 
    }); 

    var Executed = false; 

    jQuery(function ($) { 
     $(document).ajaxStop(function() { 
      // Executed when all ajax requests are done. 
      if (!Executed) LoadGrid(); 
      Executed = true; 
     }); 
    });