Lade-Gif anzeigen, nachdem der Absenden-Button angeklickt wurde?

Question

Ich versuche ein Lade-GIF anzuzeigen, nachdem ein Nutzer auf ein Formular geklickt hat.

Ich habe endlos nach einem guten Tutorial gesucht, das zeigt, wie es gemacht wurde.

Ich komme auf halbem Weg, aber das Gif hält nicht lange genug, weiß jemand von einem guten Tutorial oder die Skripte müssen dies vervollständigen.

Answer 1

tun Sie es mit setTimeout, um das gif (myImg.src = myImg.src;) gleich nach dem Senden neu zu laden.

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

Der obige Code im Grunde das gleiche, außer msg tut() verwendet innerHTML- das animierte gif, anstatt die Änderung der Quelle eines bestehenden gif hinzuzufügen. Das Konzept ist dasselbe, Sie müssen das gif NACH dem submit laden und das können Sie nur mit setTimeout tun (weil sonst IE neue Skripte blockiert).

Answer 2

Es ist wirklich einfach. Sie haben ein Bild, zunächst verborgen:

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

Sie machen eine AJAX-Anfrage:

$('#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(); 
    } 
}); 

Es ist kein Hexenwerk, das verspreche ich. :)

EDIT: Als Reaktion auf Ihren Kommentar verwendet dies jQuery. Sie legen das jQuery-Tag, also nehme ich an, dass das in Ordnung ist.

Ich bemerkte auch, dass ich Ihre ursprüngliche Frage nicht vollständig ansprach, nämlich, dass Sie den Ladebalken für ein vermutlich normales Formular anzeigen möchten. Wenn Ihr Formular-Tag eine ID von „myform“ hat, das sollte es tun:

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

Sie können auch eine Zeile wie diese in werfen:

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

Wenn Sie von den Benutzern stoppen wollen, klicken einreichen mehr als einmal. Dies sollte immer noch serverseitig verifiziert werden, aber es ist eine nette oberflächliche Verteidigungsbarriere.

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

}); 

Alle Ajax-Aufrufe auf der Seite werden diese Standardeinstellungen

Answer 4

„Das GIF halten nicht lange genug“ nutzen? Das Problem liegt wahrscheinlich darin, dass das GIF nicht korrekt funktioniert. Sie können eine Schleife mit den meisten Bildbearbeitungsprogrammen erstellen, die GIFs unterstützen.