Come mostrare una gif carico mentre si sta eseguendo un modulo di invio JQuery

Question

Sto provando a mostrare un semplice spinner gif nel frattempo viene eseguito un invio (ci vuole un po 'perché devo stabilire alcune comunicazioni con i provider via web Servizi).

Così, ho questo:

$('#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 è, che la gif non mostra alcuna animazione, è come si è congelato.

Perché?

C'è un altro modo per implementare questo (si noti che non sto usando AJAX e non voglio)?

Grazie.

Answer 1

Hai provato a caricare l'immagine su un documento pronto, nascondendolo solo. Quindi visualizzalo nella tua funzione? In questo modo, l'immagine è già caricata e ruotata.

Answer 2

Utilizzare .show() e .hide() per attivare l'animazione di caricamento durante l'invio?

Answer 3

Il vero problema con la vostra implementazione è come fa il lato client a sapere quando la richiesta è stata completata. Uno dei motivi per cui Ajax è utile è perché abbiamo una nozione di stati e quindi possiamo visualizzare un loader mentre il client è in attesa di una risposta e rimuovere il loader quando il client riceve una risposta.

Come determinare quando la comunicazione con il servizio Web è completata? Dici che non vuoi usare Ajax, ma se vuoi interrogare un servizio per determinare se la comunicazione è stata completata, probabilmente stai vedendo qualcosa che richiederà Ajax.

Answer 4

Vorrei il div sulla pagina per iniziare, ma con style='display:none' quindi inserire un $('#PleaseWait').show() nel codice quando si desidera che venga visualizzato.

Se si lascia lo display:none spento, è possibile modificare vedere come appare senza dover inviare nuovamente il modulo.

NB: si consiglia di avvolgere l'overlay e gif in un div padre per comodità.

Answer 5

Utilizzando la funzione jQuery submit, è possibile specificare un carico di immagini come questa:

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