Esegui la funzione dopo che tutte le richieste ajax .load() sono finite

Question

Ho una pagina con un set di tabulazioni. Ciascuna scheda è caricata dalla funzione jQuery .load().

Desidero visualizzare un'animazione di caricamento che scompare quando tutte le richieste di ajax sono terminate. Tuttavia, document.ready() mi ha fornito solo un successo limitato.

Come posso garantire che tutte le richieste ajax siano completate prima di eseguire il codice per nascondere l'animazione di caricamento?

Answer 1

ajaxComplete

Per la documentazione:

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

Answer 2

Utilizzare il callback argomento per .load(), impostazione di un flag o aumentando un contatore nella funzione di callback. Una volta impostati tutti i flag o il contatore raggiunge il numero di schede, si sa che tutte le schede sono state caricate ed è possibile rimuovere l'animazione.

In pseudocodice che potrebbe o non potrebbe essere valido 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) 

documentazione qui: http://api.jquery.com/ajaxStop/

Answer 4

un'occhiata a questo post e risposte ... https://stackoverflow.com/a/13090589/999958

Un utile soluzione per me: Guarda una chiamata ajaxCallComplete() in ogni .plete (...);

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

La speranza può aiutare ...

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

Fondamentalmente, ho quasi simile di questo problema, che voglio caricare una griglia dopo aver completato il carico 2 caselle combinate e alla fine Voglio caricare una griglia, quindi ho risolto il problema

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