Javascript 每隔x毫秒刷新浏览器中的图像

我有一个服务器（AWS实例），它每隔10毫秒发出一个图像文件

test.png

我在服务器上还有一个网页，比如说，

index.html

。 在

index.html

中，我有一个图像标记，其

src=“test.png”

现在，我想做的是每10毫秒刷新一次图像（

test.png

）。 我知道我可以通过多种方式做到这一点：

• 使用JS重新加载页面（

  location.reload（）；

  ）
• 使用JS更新src属性（

  setInterval（refresh（），10）；//使用时间戳
  要重新加载的浏览器（不是从缓存）

• 使用JS和Ajax点击服务器获取图像URL使用HTML元标记

• 等等

这些方法的问题在于：

A） 如果刷新时间小于250ms，则图像不会更新

B） 图像闪烁

问题： 如何使图像每10毫秒刷新一次（或更少！越快越好…），而不闪烁？寻找一些想法

编辑

我已经尝试过使用setTimeout，正如@tripleb所建议的那样，但我可以说没有区别

function refresh(){
   //update src attribute with a cache buster query
   setTimeout("refresh();",10)
}

refresh();

---

第二种方法最好您的问题可能是您正在使用setInterval，这不是一个真正好的方法，因为它总是忽略前一个调用是否准备好而执行。这可能就是为什么对于小的超时，它只是“锁定”尝试

循环函数在第一次刷新完成之前不会启动新的刷新

另外，对于任何实际应用程序，10毫秒可能是最快的速度

更新：10 mils是浏览器渲染速度最快的方法，但是您可以通过执行以下操作使浏览器尽可能快地更新：

---

将random

Math.random（）

放在url的末尾，每10毫秒使用一个setInterval调用一个新的random并用它替换图像，怎么样？不过10毫秒的速度非常快。就像他们上面说的。我不确定这是为了什么

范例

HTML

<img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" id="myImage" />

---

小提琴-

事实上，4ms是由HTML5规范指定的，在2010年及以后发布的浏览器中是一致的。在（Firefox 5.0/Thunderbird 5.0/SeaMonkey 2.2）之前，嵌套超时的最小超时值为10毫秒

---

希望这有助于某人使用jquery的setInterval（）方法添加时间间隔。它以毫秒为参数。

流媒体怎么样？您可以使用node.js通过web套接字将图像数据推送到客户端。

如评论中所述，对于您尝试使用的机制，10毫秒（1/100秒）有点快。考虑到完全运动视频通常是每秒30帧（每秒100帧将是高速视频回放，而不是仅仅通过推送图像请求来支持浏览器）。 由于听起来您想要实现的是流式视频，因此我可以推荐以下内容作为我们在此处使用的内容：

流式视频源：开放广播项目-您可以使用该平台提供的各种方法生成视频流。您可以使用此命令生成rtmp流

nginxweb服务器：-能够很好地处理rtmp流

---

Flowplayer:-我们将其放在nginx框中，并将其嵌入到从那里提供服务的网页中。

更高效或更具体地解决问题？我可以想出解决这些问题的方法，但无法将其描述为更有效的方法。@JECarterII谢谢，我已将问题编辑得更清楚。每隔

10ms

加载一个映像意味着客户端到服务器和回客户端的连接在整个请求过程中都应该与本地主机一样快。@Deadpool 10ms就是一个例子。任何高达30毫秒的都可以；）@pookie

30ms

还是太快了。在

30ms

中，服务器将在1秒内收到来自1个用户的33个请求。在客户端，如果请求在没有任何延迟的情况下以某种方式正确返回，则每隔

30ms更新一个图像的效果将使许多图像被覆盖，而不会对视觉外观造成任何影响。同意10ms-如果需要流式处理，也许从服务器上生成的rtmp中输入一个像flow player这样的播放器。好的，我将尝试设置超时@杰卡特里，你是对的（流媒体）。好的，试试这个。不幸的是，我看不出有什么不同。在更新映像之前，超时仍然需要等于或大于250ms。你说得对。虽然它不是完美的，但在不实现流式传输的情况下，它将是一样好的，我将在稍后的时间点做这件事。谢谢，这要快得多，效果也很好。谢谢，但正如我在问题中提到的那样，我已经尝试过了：使用JS更新src属性（setInterval（refresh（），10）；//使用timestamp强制浏览器重新加载-而不是从缓存中加载）使用timestamp与使用random是一种类似的技术-我都尝试过；）如果可以，请详细说明；）node.js和web套接字都不是我熟悉的东西。很抱歉，我不熟悉SO编辑器。我试图添加一些代码，但它不适合我。我不知道为什么其他人可以发布长答案，但我只有500个字符：(
<img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" id="myImage" />

var myImageElement = document.getElementById('myImage');
myImageElement.src = 'http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg?rand=' + Math.random();

setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    myImageElement.src = 'http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg?rand=' + Math.random();
    console.log(myImageElement);
}, 10);