Ejecutar la función después de que todas las solicitudes ajax .load() hayan finalizado

Question

Tengo una página que tiene un conjunto de pestañas. Cada una de las pestañas se carga mediante la función jQuery .load().

Quiero mostrar una animación de carga que desaparece cuando finalizan todas las solicitudes de AJAX. Sin embargo, document.ready() solo me ha proporcionado un éxito limitado.

¿Cómo puedo asegurarme de que se completen todas las solicitudes ajax antes de ejecutar el código para ocultar la animación de carga?

Answer 1

ajaxComplete

por la documentación:

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

Answer 2

utilizar el argumento callback a .load(), el establecimiento de una bandera o el aumento de un contador en la función de devolución de llamada. Una vez que todas las banderas se establecen o el contador alcanza el número de pestañas, usted sabe que todas las pestañas se han cargado, y puede eliminar la animación.

En pseudocódigo que podría o no ser válido 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) 

Documentación aquí: http://api.jquery.com/ajaxStop/

Answer 4

mirada a este post y respuestas ... https://stackoverflow.com/a/13090589/999958

Un útil solución para mí: Mire la llamada ajaxCallComplete() en cada .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(); }); 
}; 

La esperanza puede ayudar a ...

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

Básicamente, tengo casi similar de esta cuestión, que quiero cargar una cuadrícula después de completar la carga 2 cuadros combinados y al final Quiero cargar una rejilla, por lo que he resuelto de esa manera

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