demora la muestra de un archivo ajax que carga gif usando jQuery

Question

¿Cuál es la mejor manera de retrasar la presentación de un gif ajax-loader? Cuando hago clic en un botón, el gif del cargador muestra y oculta, incluso si el tiempo empleado es de algunos cientos de milisegundos, esto le da al navegador una especie de parpadeo. Lo que quiero es decir solo mostrar el gif si se necesitan más de 1000 milisegundos para completar la solicitud de Ajax.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#loader').hide(); 
     $('#btnGetPeople').click(function() { 
      $('#loader').show(); 
      $.getJSON("/User/GetName/10", 
       null, 
       function(data) { showPerson(data); }); 
     }); 
    }); 

    function showPerson(data) { 
     alert(data); 
     $('#loader').hide(); 
    } 
</script> 

Mi div cargador contiene ....

<div id="loader"><img alt="" src="/content/ajax-loader.gif" /></div> 

¿Cuál es la mejor técnica para lograr esto?

Answer 1

Como se puede ver he añadido un tiempo de espera que retrasen muestra de 300 ms. Si ajax es más rápido, el tiempo de espera se cancela antes de que realmente se muestre el cargador.

<script type="text/javascript"> 
    var showLoader; 
    $(document).ready(function() { 
     $('#loader').hide(); 
     $('#btnGetPeople').click(function() { 
      // only show loader if ajax request lasts longer then 300 ms 
      showLoader = setTimeout("$('#loader').show()", 300); 
      $.getJSON("/User/GetName/10", 
       null, 
       function(data) { showPerson(data); }); 
     }); 
    }); 

    function showPerson(data) { 
     clearTimeout(showLoader); 
     alert(data); 
     $('#loader').hide(); 
    } 
</script> 

Answer 2

Aquí hay una manera divertida de hacerlo. Reemplazar $loader.show() con esto:

$("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000)); 

Y su comando ocultar con esto:

window.clearTimeout($("#loader").hide().data('timeout')); 

Answer 3

Pensé en compartir algo que hice para esto. Tenía una situación en la que necesitaba hacer más que solo mostrar u ocultar el elemento. Así que utilicé el enlace para crear eventos personalizados para el cargador:

$("#loader").bind("delayshow", function (event, timeout) { 
    var $self = $(this); 
    $self.data('timeout', setTimeout(function() { 
     // show the loader 
     $self.show(); 
     /* 
      implement additional code here as needed 
     */ 
    }, timeout)); 
}).bind("delayhide", function (event) { 
    // close and clear timeout 
    var $self = $(this); 
    clearTimeout($self.hide().data('timeout')); 
    /* 
     implement additional code here as needed 
    */ 
}); 

// show it with a 500 millisecond delay 
$("#loader").trigger('delayshow', 500); 

// hide it 
$("#loader").trigger('delayhide'); 

Answer 4

También podría hacerlo así.

var loadingTimer; 

$(document).ready(function() { 

    $("#loader").ajaxStart(function() { 
     loadingTimer = setTimeout(function() { 
      $("#loader").show(); 
     }, 200); 
    }); 

    $("#loader").ajaxStop(function() { 
     clearTimeout(loadingTimer); 
     $(this).hide(); 
    }); 

}