ajaxでデータを送信するとき、ローディングバーを作成したい

Question

私はJQueryでAjaxを使用しています。私はajaxを持つデータをreturn.php（例えば）に送信しています。 ajaxがデータを送信すると、 "loading .."という画面に書きたいと思います。その場合

Answer 1

いい場所は確かにその後here

だろう、@royinamirが言ったように、ショー/アニメーションを隠します。 アニメーションにIDを付けます。ショート例（jQueryのを使用して）：CSSで

<div id="laoding"> 
<p>Loading data</p> 
</div> 

：

#loading{ 
    display: none; 
    background: url(images/icon_loading_ani.gif) no-repeat;//the url of your animated gif 
    background-position: 0px center; 
    min-height: 35px; 
    padding: 5px 0 0 0; 
} 

とjQueryで：

$.ajax({ 
     type: 'get', 
     url: url, 
     data: 'ajax=1, 
     beforeSend: function() { 
      $('#get_data').show(); 
     }, 
     success: function (data) { 
      $('#filter').show(); 
// do some other stuff 
     } 
    }); 

Answer 2

$("#loading_animation").bind({ 
    ajaxStart: function() { $(this).show(); }, 
    ajaxStop: function() { $(this).hide(); } 
}); 

Answer 3

、ダイアログを示すことができた - 「ロード」をとAjaxのコールバックで、あなたは読み込みダイアログを隠すことができます。ダイアログの非表示を示す&をユーティリティに配置して、他の場所で使用することができます。アニメーションを取得する

Answer 4

純粋実用的な面ではそれは私の経験では（通常の場合です）Ajaxリクエストのダウンロード部分が1秒以下で済むので、多かれ少なかれ手の込んだプログレスバーやそれに類するものを正当化するのは難しいそれでは。さらに10分の1秒ごとにプログレスバーを維持して更新すると、現在ダウンロード時間が増加している部分の大部分を要求する可能性があります。

しかし、ユーザーは、ダウンロードが進行中であるため、いつボタン操作に対する応答が得られないのかを知ることができます。リクエストを発行するときに、小さな（24 x 24のような）カラーの画像を黒くすることを検討したいかもしれません。要求が完了するとその色を復元します。さらに、Dennis Huninkの提案を受けて、送信ボタンの色を変更してください。

しかし、それはすべて単なる実用的なものです。進行中のバーを作るのは楽しいですし、それが動作しているときにそれを賞賛することはさらに楽しいです。それだけで仕事は価値があります。