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

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).Come mostrare una gif carico mentre si sta eseguendo un modulo di invio JQuery

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.

fonte

2011-11-15 content01

suppongo si utilizza una gif animata e che anima se si mostra che "normalmente" –

Se il 'gif' è congelato, che non ha nulla a che fare con JavaScript/jQuery. – Sparky

** La gif è bloccata perché IE6, IE7 e IE 8 sono buggy. ** Non so ancora su IE9, ma so per certo ** su tutti gli altri browser il gif NON si blocca **. Leggi questo per la [risposta corretta] (http://stackoverflow.com/a/780617/260080) e per [alcuni possibili soluzioni alternative] (http://stackoverflow.com/a/7151504/260080). –

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.

fonte

2011-11-15 18:06:39 Challe

Questo lavoro ??? Nei miei test l'immagine continua a congelarsi sotto IE7 e IE8, su tutti gli altri browser l'immagine NON si blocca fino a quando non arriva la risposta del server. –

Questo non funziona con il mio Ubuntu/Firefox (l'animazione gif si blocca) –

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

fonte

2011-11-15 18:08:01 Hazza

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.

fonte

2011-11-15 18:08:12

È un normale modulo di invio, quando si fa clic il browser non ti porta via finché il server non ha risposto alla richiesta, dando all'animazione il tempo di girare un piccolo.Tuttavia, in IE (testato 7-9) l'avvio della richiesta bloccherà l'animazione, anche se era già in rotazione sulla pagina. – Esailija

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à.

fonte

2011-11-15 18:10:02 Ben

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; 
});

fonte

2011-11-15 18:29:25

L'uso dello show hide con la funzione submit ha funzionato bene. Semplice e robusto. – codepuppy

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

risposta

Problemi correlati