Mostra gif di caricamento dopo aver fatto clic sul pulsante di invio?

Question

Sto tentando di mostrare una gif di caricamento dopo che un utente fa clic su invia su un modulo.

Ho una ricerca infinita per un buon tutorial che mostra come è stato fatto.

I get a metà strada, ma la gif non regge abbastanza a lungo, qualcuno sa di un buon tutorial o gli script devono completare questo.

Answer 1

lo si utilizza utilizzando setTimeout per ricaricare il gif (myImg.src = myImg.src;) subito dopo l'invio.

function wait_animation() 
{ 
    var myMsg = "Sending form data to server... Please Wait..."; 
    window.status = myMsg; 
    msg("<img name='wait' src='/all/images/wait.gif' height=7 width=78> " + myMsg); 
} 

function long_wait_animation() 
{ 
    var myMsg = "Still sending... You are uploading large files and we have not yet received " + 
          "all the information. Unfortunately, Internet Explorer sometimes interprets " + 
          "this delay as a server error. If you receive a 'Timeout' or 'Site not found' " + 
          "error please click your 'Back' button and try sending less files."; 
    window.status = "Still sending ..."; 
    msg("<img name='wait' src='/all/images/wait.gif' height=7 width=78> " + myMsg); 
} 

// Generic onSubmit handler 
function form_on_submit(myForm) 
{ 
    form_check_lists(myForm); 
    if (form_errors.length != 0) { 
     err( 'There are some problems with the information you entered:' + 
        '<ul><li>' + form_errors.join('<li>')); 
     form_enable_submit(myForm); // re-enable submit (so user can retry) 
    } else { 
     hideLayer('err'); 
     window.status = "Uploading Data... Please Wait..."; 
     form_disable_submit(myForm); // function that prevents double-submissions 
     window.setTimeout("wait_animation()", 10);    // 1/100th 
sec (must happen after submit) 
     window.setTimeout("long_wait_animation()", 60*1000); // 60 secs 
     myForm.submit(); 
    } 
    // reset form errors 
    form_errors = new Array(); 
    return false; // false=don't submit (because we probably just submitted it). 
} 

Il codice di cui sopra sta facendo fondamentalmente la stessa cosa, tranne msg() utilizza innerHTML per aggiungere la gif animata piuttosto che modificare la fonte di un GIF esistente. Il concetto è lo stesso però, è necessario caricare la gif DOPO l'invio e lo si può fare solo usando setTimeout (perché altrimenti IE blocca i nuovi script).

Answer 2

È davvero semplice. Si dispone di un'immagine, inizialmente nascosta:

<img src="myloadingimage.gif" style="display: none;" id="loading_image"> 

si effettua una richiesta AJAX:

$('#loading_image').show(); // show loading image, as request is about to start 
$.ajax({ 
    url: '..', 
    type: '..', 
    complete: function() { 
     // request is complete, regardless of error or success, so hide image 
     $('#loading_image').hide(); 
    } 
}); 

Non è scienza missilistica, lo prometto. :)

EDIT: In risposta al tuo commento, questo utilizza jQuery. Metti il ​​tag jQuery quindi presumo che vada bene.

Ho anche notato che non ho risolto completamente la domanda originale, ovvero che si desidera mostrare la barra di caricamento per quella che è presumibilmente una forma regolare. Se il tag form ha un id di "MyForm", questo dovrebbe farlo:

$('#myform').submit(function() { 
    $('#loading_image').show(); // show animation 
    return true; // allow regular form submission 
}); 

Si potrebbe anche lanciare una linea come questa in:

$(':submit',this).attr('disabled','disabled'); 

Se si vuole impedire agli utenti di clic su Invia più di una volta. Questo dovrebbe comunque essere verificato sul lato server ma è una bella barriera di difesa superficiale.

Answer 3

**To set globally ajax options you need to do this** 

<img src="myloadingimage.gif" style="display: none;" id="loading"> 

$("#loading").bind("ajaxSend", function(){ 

    $(this).show(); 

}).bind("ajaxComplete", function(){ 

    $(this).hide(); 

}); 

Tutte le chiamate AJAX sulla pagina utilizzerà queste impostazioni predefinite

Answer 4

"Il GIF non vale per abbastanza a lungo"? Il problema è probabilmente che il GIF non esegue il ciclo correttamente. Puoi farlo in loop con la maggior parte degli editor di immagini che supportano le GIF.