web-dev-qa-db-ja.com

AJAXリクエストを待つ間の標準的な方法は何ですか?

ほとんどの人は、「読み込み中」の画像やテキストを表示するのはいいことだと思います。しかし、ボタンの横、またはページの上部などのどこかに表示しますか(これまで使用していたgmailのように)

それとは別に、追加のリクエストを送信しないようにボタンを無効にしますか?もしそうなら、それはバックグラウンドでそれを行うのですか、それともボタンの外観も変更しますか?

通常のウェブサイトとモバイルの両方に適用できるレスポンシブウェブサイトを設計しています。

7
user3163577

スピナー/進行状況を表示することは必須ですが、サイトをレスポンシブに見せるための方法は他にもあります。

  • スピナーを所定の場所に表示する(ボタン/リンクの内側、オブジェクトの読み込み中)の方がわかりやすく、ユーザーが自分の応答が処理されたことを確認できるため、望ましいです現在、ランダムなインターフェースではなく、無関係な作業を行っています。

  • 瞬時のフィードバックを目指します。ユーザーが何かをクリックすると、ボタンの色、ボタンの状態、進行状況、スピナー、アニメーションなど、何かが変化します。どのような状況でも、機能しているかどうかをユーザーに推測させないでください。

  • 短いロードをインターフェースアニメーションの背後に隠すことができます(何かをロードし、その間パネルがどのようにスライドしているかを表示しています)。ただし、アニメーションは短くする必要があります(100ミリ秒未満)。そうしないと、ユーザーが怒ります。

  • ブロックジャンプは避けてください(進行状況の表示中は1つのサイズであり、ロードされるとサイズが変わります)。コンテンツが表示されるブロックを固定サイズにします。

  • 速い変化のために進行状況/スピナーを表示することを気にしないでください、それはちらつきを作成するだけです。リクエストが予想以上に長い場合(> 500ms)のみ、進行状況の表示を開始します。

  • 可能であれば、ネットワークリクエストに優先順位を付けて、ユーザーが現在最も見ている可能性の高いものを最初にロードしてみてください。最初に重要なコンテンツを読み込み、後で詳細を読み込みます。これにより、巨大な違いが生まれます。

  • 「準備ができたらすぐに表示する」のではなく、リクエストの結果をアニメーション表示/調整するのが適切な場合があります。その方法については、このページを確認してください。 http://ilyabirman.net/projects/emerge /

次に、ウェブでのレスポンシブUIの良い例を示します: http://seesu.me/ohttp://fastmail.fm は別のものです。

8
Nikita Prokopov