Cómo mostrar un gif de carga significa mientras se está ejecutando un formulario de envío JQuery

Question

Estoy tratando de mostrar un gif giratorio simple mientras se está ejecutando un envío (se necesita un poco porque tengo que establecer algunas comunicaciones con los proveedores a través de la web servicios).

Por lo tanto, tengo unas pocas cosas:

$('#gds_form').submit(function() { 
     var pass = true; 
     //some validations 

     if(pass == false){ 
      return false; 
     } 

     $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>'); 
     $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>"); 
     return true; 
    }); 

la cosa es, que la .gif no muestra ningún tipo de animación, que es como se congela.

¿Por qué?

Hay otra forma de implementar esto (¿advierte que no estoy usando AJAX y no quiero)?

Gracias.

Answer 1

Ha intentado cargar la imagen en el documento listo, solo que está oculta. Luego, muéstralo en tu función? De esta manera, la imagen ya está cargada y girando.

$(document).ready(function() { 
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>'); 
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>"); 
}); 

$('#gds_form').submit(function() { 
    var pass = true; 
    //some validations 

    if(pass == false){ 
     return false; 
    } 
    $("#overlay, #PleaseWait").show(); 

    return true; 
}); 

Answer 2

Uso .show() y .hide() para cambiar la animación de carga mientras se envía?

Answer 3

El verdadero problema con su implementación es cómo sabe el lado del cliente cuándo se ha completado su solicitud. Una de las razones por las cuales Ajax es útil es porque tenemos una noción de estados y, por lo tanto, podemos mostrar un cargador mientras el cliente está esperando una respuesta y eliminar el cargador cuando el cliente recibe una respuesta.

¿Cómo vas a determinar cuándo se completa la comunicación con el servicio web? Usted dice que no quiere usar Ajax, pero si va a querer consultar un servicio para determinar si su comunicación se completó, probablemente esté viendo algo que requiera Ajax.

Answer 4

Comenzaré con el div en la página, pero con style='display:none', coloque un $('#PleaseWait').show() en el código cuando desee que aparezca.

Si deja el display:none apagado, puede editar ver cómo se ve sin necesidad de enviar el formulario una y otra vez.

NB: es posible que desee envolver la superposición y el gif en un div principal para su comodidad.

Answer 5

Uso de la función jQuery submit, puede especificar una imagen de carga de esta manera:

$('#form').submit(function() { 
    $('#wait').show(); 
    $.post('/somepage.htm', function() { 
     $('#wait').hide(); 
    }); 
    return false; 
});