¿Cómo puedo configurar la carga de imágenes durante el procesamiento de datos posteriores para jquery ajax?

El código jquery ajax es:

$("#id_btnpolls").click(function(){ var valCheckedRadio = $('input[name=data[distributions]]:checked').val(); //alert(valCheckedRadio); $.ajax({ type: "POST", url: "/pollanswers/checkpollanswers", data: "valCheckedRadio="+valCheckedRadio, success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); } }); }) 

Cuando hago clic en el botón, los datos se muestran después de aproximadamente 5 segundos. Durante ese período de alojamiento quiero añadir una imagen de carga. ¿Cómo puedo hacer esto?

Aquí está el CSS + HTML que uso para mi imagen de carga. Utilizo jQuery para agregar simplemente una clase que cambia la opacidad de 1 a 0, en combinación con una propiedad de transición CSS para un efecto de desvanecimiento. La imagen de fondo para #loader es 220px X 80px y es solo un rectángulo redondeado de color sólido con el texto “cargando” en el lado derecho. El img real del spinner “ajax” tiene una altura de 60px, por lo que la posición relativa y el margen negativo están ahí para centrar el img verticalmente.

  #loader { width: 220px; height: 80px; position: fixed; top: 50%; left: 50%; z-index: -1; opacity: 0; background: url(assets/images/bg-loader.png) no-repeat center center; transition: all .5s ease-in-out; margin: -40px 0 0 -110px; } #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;} .loading #loader {z-index: 1000; opacity: 1.0} 

Y el HTML (tengo el loader.gif desde aquí http://www.preloaders.net ):

  

Y luego tu jQuery:

 $("#id_btnpolls").click(function(){ var $body = $('body'), valCheckedRadio = $('input[name=data[distributions]]:checked').val(); $body.addClass('loading'); $.ajax({ type: "POST", url: "/pollanswers/checkpollanswers", data: "valCheckedRadio="+valCheckedRadio, success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); $body.removeClass('loading'); } }); }) 

1) Tener un div de retención para la imagen, que normalmente no es visible.

Puedes hacerlo a través de css, agregando visibility:hidden; (vs visibility: visible; ), u opcionalmente con display: none;

2) En su manejador de clics, haga visible ese div holding.
3) En el callback done , hazlo invisible otra vez.

Directamente desde los documentos ,

 var request = $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); request.done(function(msg) { $("#log").html( msg ); // hide your loading image div here }); 

Echa un vistazo al plugin blockUI para jQuery

 $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); 

El código HTML y CSS especificado por j-man86 es bueno. Para jQuery puede usar la función beforeSend en la llamada AJAX. beforeSend se llama antes de que se envíe una solicitud AJAX. Para ocultar la imagen de carga, use la función completa de jQuery AJAX que se llama después de que se haya completado una solicitud AJAX. Entonces el código se verá como:

 $("#id_btnpolls").click(function(){ var $body = $('body'), valCheckedRadio = $('input[name=data[distributions]]:checked').val(); $body.addClass('loading'); $.ajax({ type: "POST", url: "/pollanswers/checkpollanswers", data: "valCheckedRadio="+valCheckedRadio, beforeSend: function(){ $body.addClass('loading'); }, success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); }, complete: function(){ $body.removeClass('loading'); } }); })