Afficher le chargement GIF après avoir cliqué sur le bouton Envoyer?

Question

J'essaie de montrer un gif de chargement après qu'un utilisateur clique sur soumettre sur un formulaire.

J'ai une recherche infinie pour un bon tutoriel montrant comment cela a été fait.

J'arrive à mi-chemin mais le gif ne tient pas assez longtemps, est-ce que quelqu'un connaît un bon tutoriel ou les scripts doivent le compléter.

Answer 1

vous le faites en utilisant setTimeout pour recharger le gif (myImg.src = myImg.src;) juste après l'envoi.

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

Le code ci-dessus fait essentiellement la même chose, sauf msg() utilise innerHTML pour ajouter le gif animé plutôt que de changer la source d'un fichier GIF. Le concept est le même, vous devez charger le gif APRÈS le soumettre et vous ne pouvez le faire en utilisant setTimeout (parce que sinon IE bloque les nouveaux scripts).

Answer 2

C'est vraiment simple. Vous avez une image, d'abord cachée:

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

Vous faites une requête 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(); 
    } 
}); 

Ce n'est pas sorcier, je vous le promets. :)

EDIT: En réponse à votre commentaire, cela utilise jQuery. Vous mettez le tag jQuery donc je suppose que c'est bien.

J'ai également remarqué que je n'ai pas complètement répondu à votre question initiale, qui est que vous voulez montrer la barre de chargement pour ce qui est probablement une forme régulière. Si votre balise form a un id de « myform », cela devrait le faire:

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

Vous pouvez également jeter une ligne comme celui-ci dans:

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

Si vous voulez empêcher les utilisateurs de cliquer soumettre plus d'une fois. Cela devrait encore être vérifié côté serveur mais c'est une belle barrière de défense superficielle.

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

}); 

Tous les appels Ajax sur la page utilisera ces paramètres par défaut

Answer 4

« Le GIF ne tient pas assez longtemps »? Le problème est probablement que le GIF ne boucle pas correctement. Vous pouvez le faire en boucle avec la plupart des éditeurs d'images qui prennent en charge les GIF.