모든 agax.load() 요청이 완료된 후 기능 실행

모든 agax.load() 요청이 완료된 후 기능 실행

탭이 있는 페이지가 있습니다.각 탭은 jQuery에 의해 로드됩니다..load()기능.

모든 아약스 요청이 완료되면 사라지는 로딩 애니메이션을 표시하고 싶습니다.하지만,document.ready()제게 제한적인 성공을 가져다 주었을 뿐입니다.

로드 애니메이션을 숨기기 위해 코드를 실행하기 전에 모든 아약스 요청이 완료되었는지 확인하려면 어떻게 해야 합니까?

.ajaxStop(handler)

여기에 있는 설명서: http://api.jquery.com/ajaxStop/

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

아약스 완료

설명서에 따라:

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

사용callback에 대한 주장..load()콜백 기능에서 플래그를 설정하거나 카운터를 늘립니다.모든 플래그가 설정되거나 카운터가 탭 수에 도달하면 모든 탭이 로드되었으며 애니메이션을 제거할 수 있습니다.

유효한 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';
}

기본적으로 저는 이 문제와 거의 비슷한 점이 있는데, 2개의 콤보 박스를 로드한 후 그리드를 로드하고 마지막에 그리드를 로드하고 싶어서 그렇게 해결했습니다.

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

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

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

    $(document).ready(function () {
        LoadDropbox1();
        LoadDropbox2();
    });

    var Executed = false;

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

이 게시물을 보고 답변하십시오.https://stackoverflow.com/a/13090589/999958

유용한 해결 방법: 각 .complete(...)의 ajaxCallComplete() 호출을 확인합니다.

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

희망은 도움이 될 수 있습니다...

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

}

언급URL : https://stackoverflow.com/questions/2502828/execute-function-after-all-ajax-load-requests-are-finished