Envolviendo todas las llamadas AJAX jQuery

Relleno muchas partes de mi sitio web usando

$("#theDivToPopulate").load("/some/api/call.php", callBackToBindClickEventsToNewDiv);

Donde /some/api/call.php devuelve una lista construida, div o alguna otra estructura HTML para colocar directamente en mi div de destino. Internet ha estado funcionando lento últimamente y he notado que el tiempo entre el clic de un botón (que inicia estas llamadas API) y el llenado de div es de varios segundos. ¿Hay una manera fácil de envolver globalmente todas las llamadas de carga para que se muestre un div que contenga "Cargando ..." antes de que se realice la llamada y se oculte una vez que se complete la llamada a la API?

No puedo simplemente poner el código para ocultar el div en callBackToBindClickEventsToNewDiv ya que algunos eventos de carga tienen devoluciones de llamadas diferentes. Tendría que copiar el código en cada función, lo cual es feo y anula el propósito. Quiero que el flujo de cualquier .load sea como sigue:

 1) dispplayLoadingDiv()
 2) Execute API call
 3) Hide loading div
 4) do callback function.

El div de carga debe ocultarse primero, ya que la devolución de llamada contiene algunas animaciones para traer el div recién cargado muy bien.

EDITAR: Ampliando la respuesta de jacktheripper:

var ajaxFlag;
$(document).ajaxStart(function(){
    ajaxFlag = true;
    setTimeout(function (e) {
        if(ajaxFlag) {
            hideAllDivs();
            enableDivs(['loading']);
        }
    }, 500);

}).ajaxStop(function(){
    ajaxFlag = false;
    var load = $("#loading");
    load.css('visibility','hidden');
    load.css('display','none');
    load.data('isOn',false);
});

De esta manera, la carga solo se muestra si la página tarda más de 500 MS en cargarse. Encontré que la carga entraba y salía muy rápido hacía que las cosas se entrecortaran para cargas de página rápidas.

preguntado el 31 de julio de 12 a las 15:07

2 Respuestas

Utilice el siguiente jQuery:

$(document).ajaxStart(function(){ 
    $('#loader').show(); 
}).ajaxStop(function(){ 
    $('#loader').hide();
});

Donde tienes un elemento llamado #loader que contiene lo que desea mostrar cuando se realiza una solicitud AJAX. Podría ser un lapso con texto, una imagen (por ejemplo, un gif) o algo similar. El elemento debe establecerse inicialmente en display: none

Ni siquiera necesita llamar a la función en ningún otro lugar.

Respondido 31 Jul 12, 15:07

Exactamente lo que quería. Cuando las llamadas a la API son rápidas, el div va y viene tan rápido que no se nota. Cuando son de carga lenta se muestra. - user974896

Prueba esta

$("#someButtonId").click(function(e){
   e.preventDefault();
   $("#theDivToPopulate").html("Loading...");
   $.get("/some/api/call.php",function(data){
       $("#theDivToPopulate").fadeOut(100,function(){
           $("#theDivToPopulate").html(data).fadeIn(100,function(){
               //Do your last call back after showing the content
           });
      });
   });    
});

Respondido 31 Jul 12, 15:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.