提出ボタンをクリックした後にgifを表示しますか？

Question

ユーザーがフォーム上で送信をクリックした後、読み込み中のGIFを表示しようとしています。

私はそれがどのように行われたかを示す良いチュートリアルを探しています。

私は途中でGIFを取得できませんが、十分なチュートリアルを知っているか、スクリプトでこれを完了する必要があります。

Answer 1

あなたは、送信の直後にgif（myImg.src = myImg.src;）をリロードするためにsetTimeoutを使用します。

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

上記のコードは、（MSG以外は基本的に同じことをやっている）、むしろ既存のGIFのソースを変更するよりも、アニメーションGIFを追加するinnerHTMLプロパティを使用しています。しかし、コンセプトは同じですが、提出後にgifをロードする必要があります。そうしないとIEは新しいスクリプトをブロックしないため、setTimeoutを使ってのみ行うことができます。

Answer 2

これは本当に簡単です。あなたがイメージ、最初に隠されてい：

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

をあなたは、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(); 
    } 
}); 

それは私が約束し、ロケット科学ではありません。 :)

EDIT：これはjQueryを使用しています。あなたはjQueryタグを置くので、それは問題ないと思います。

私はあなたのオリジナルの質問に完全には言及していませんでした。これは、おそらく通常のフォームであるローディングバーを表示したいということです。フォームタグは「あるmyForm」のIDを持っている場合、これはそれを行う必要があります：あなたが提出クリックからユーザーを停止する場合は

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

：

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

また、このような行を投げることができ一回以上。これはまだサーバー側で検証する必要がありますが、それは防衛の面白い障壁です。

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

}); 

すべてのAjaxはページ上で呼び出すには、「GIFは十分な長さのために保持していない」これらのデフォルト設定

Answer 4

を使うのでしょうか？問題はおそらくGIFが正しくループしないことです。 GIFをサポートするほとんどの画像エディタでループさせることができます。