1

サーバーからの「リアルタイム」データを待っている間、gif画像を表示したいと思います。それ以外の場合、クライアントは何も表示せず、リクエストのステータスを知りません。たとえば、「egg-timer」などのgif画像を使用すると、少なくともリクエストが送信され、クライアントが応答を待っていることがわかります。

これが私がそれをコーディングした方法です：

  websocket.onmessage = function(data){
     while (!data){
     $("#display").append('/templates/image.gif');
     }
     CODE THAT IS EXECUTED ON RECEIPT OF data
    }

クライアントとサーバー間の通信プロトコルにWebSocketを使用しています。ただし、サーバーからのgif待機中は画像が表示されません。data

私はJavaScriptの初心者なので、どのIDが間違っているのかわかりません

編集

助けてくれてありがとう、あなたの提案はgif画像を機能させました。

しかし、私が取得する画像は、gifではなく、（ChromeとFirefoxでは何もない）の壊れた画像アイコンのように見えます。これが今のコードです：

$("#display").append('<img src="/templates/image.gif" />');
websocket.onmessage = function(data){
         CODE THAT IS EXECUTED ON RECEIPT OF data
}

ファイルは問題なく、gif正しいディレクトリにあります。

ありがとう

4

3 に答える 3

3

通常、読み込み中の画像を表示する場合は、display：noneを使用してHTMLに直接埋め込みます（または、データの待機中にページの読み込み後に読み込み中の画像を表示する場合はブロックします）。データをリクエストするときはいつでも、リクエストを行う前にディスプレイをブロックに設定してブロックがないようにし、データが戻ってきたらディスプレイをnoneに戻します。gifを追加してDOMから削除するよりも、スタイルシートを介してgifの読み込みを制御する方が簡単だと思います。

于 2012-12-27T21:45:28.423 に答える
2

onmessage実際にデータがある場合にのみ呼び出されるため、ループして待機する必要はありません。

一般に、javascriptでデータの待機をループすることはありません。これは、待機している実際のイベントをブロックし、javascriptのシングルスレッドの性質により、ブラウザーをロックして実際のイベントを取得しないためです。

私はあなたがこのようなものが欲しいと思います：

// show msg waiting for data
$("#display").append('/templates/image.gif');
websocket.onmessage = function(data){
     // CODE THAT IS EXECUTED ON RECEIPT OF data
     // remove or hide the temporary image here 
     // now that the data has arrived and been processed.
}
于 2012-12-27T21:51:01.083 に答える
1

私はあなたが使うべきだと思います：

$("#display").append('<img src="http://www.yourhost.com/templates/image.gif" />');

それ以外の：

$("#display").append('/templates/image.gif');

または、次のように単純なcssクラスを作成することもできます。

.loading {
    display: block;
    width: 16px;
    height: 16px;
    background: transparent url('/templates/image.gif') no-repeat center center;
}

そして、実行します：

$("#display").append('<span class="loading"></span>');
于 2012-12-27T21:54:19.153 に答える