Para hacer la tarea que deseas tienes disponible ajaxStop()
:
Description:
Register a handler to be called when all Ajax requests
have completed.
Incluyendo también el inicio de la carga, el código quedaría algo así:
$(document).ajaxStart(function() {
$('.loading').show();
});
$(document).ajaxStop(function() {
$('.loading').hide();
});
He estado investigando en el código de jQuery el uso de jQuery.active
y debería informar del número de conexiones que están sin finalizar, pero depende del lugar y/o momento en el que accedas a esa propiedad contendrá lo que esperas o no ya que se decrementa su valor al final del evento done
, por lo que si intentas acceder a ese valor durante la ejecución de un callback
de done
no tendrás el valor actualizado (por ponerte un ejemplo).
Por cierto, para que se lleven bien las cuentas, asegúrate de que todas las peticiones AJAX están adosadas a document
:
As of jQuery 1.9, all the handlers for the jQuery global Ajax events,
including those added with the .ajaxStart()
method, must be attached
to document
.
Edito: He desarrollado una prueba de concepto en la que puedes comprobar que funciona correctamente mi propuesta:
/* Eventos de comienzo y final con cambios de color */
$(document).ajaxStart(function() {
console.log("Inicio");
$('.loading').show();
$('body').addClass('rojo');
});
$(document).ajaxStop(function() {
console.log("Fin");
$('.loading').hide();
$('body').removeClass('rojo');
});
/* Llamadas Ajax al pulsar el texto */
var url = 'https://jsonplaceholder.typicode.com/posts/';
$('#pruebas').on('click', function() {
$.when(
$.get(url + '1', function(data) {
console.log("Fin 1. Quedan: " + $.active);
}),
$.get(url, function(data) {
console.log("Fin 2. Quedan: " + $.active);
}),
$.get(url + '3', function(data) {
console.log("Fin 3. Quedan: " + $.active);
})
).then(function() {
console.log("Then. Quedan: " + $.active);
});
});
.loading {
display: none;
}
.rojo {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pruebas">Pulse para iniciar las pruebas</div>
<div class="loading">Cargando</div>
También podrás ver lo que dije. Durante la ejecución del evento success/done
el contador aún no ha sido decrementado, por lo que el último verá un valor de $.active
de 1, en vez de 0, incluso dentro del bloque .when()
del final.