Question

在等待来自服务器的“实时”数据时，我想显示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的新手，所以不确定错误是什么

修改

感谢您的帮助，您的建议让gif图像正常工作。

但我获得的图片不是gif，而是看起来像是一张破碎的图片图标（Chrome浏览器中没有任何内容）。这是现在的代码：

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

gif文件正常，位于正确的目录中。

由于

Answer 1

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

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

Answer 3

我认为你应该使用：

$("#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>');

在等待数据的同时在Javascript中使用gif图像

3 个答案: