1

在等待来自服务器的“实时”数据时，我想显示一张gif图片。否则客户端什么也看不到，也不知道他们的请求状态。例如，使用诸如“egg-timer”之类的 gif 图像，他们至少会知道请求已发送并且客户端现在正在等待响应。

这就是我的编码方式：

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

我正在使用 websockets 作为客户端和服务器之间的通信协议。但是在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

通常当我想显示加载图像时，我会直接将其嵌入到 HTML 中 display:none （如果它应该在页面加载后等待数据时显示加载图像，则阻止）。每当我请求数据时，我都会在发出请求之前将显示设置为阻塞，以便没有阻塞，然后在数据返回时将显示设置回无。我发现通过样式表控制加载 gif 比添加它们并从 DOM 中删除它们更容易。

于 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 回答