javascript - 在等待数据时在 Javascript 中使用 gif 图像

Question

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

我是这样写的:

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

我正在使用 websockets 作为客户端和服务器之间的通信协议(protocol)。但是 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 文件正常并且在正确的目录中。

谢谢

Answer 1

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