每x毫秒刷新一次浏览器中的图像 [英] Refresh an image in the browser every x milliseconds

问题描述

我有一台服务器（ AWS instance ），每隔10ms就会分发一个映像文件 test.png 。

我也在服务器上有一个叫做 index.html 的网页。
在 index.html 中，我有一个图片标签，它的 src =test.png。

现在，我想要做的是每10ms刷新一次该映像（ test.png ）。
我知道我可以通过多种方式来做到这一点：$ b​​
$ ul

使用JS重新加载页面（ location.reload（）; ）

使用JS更新src属性（ setInterval（refresh（），10）; //使用时间戳强制
浏览器重新加载 - 而不是缓存）

使用JS和Ajax命中图像URL的服务器使用HTML元标记< meta http-equiv =refresh
content =5/>

等等。 。

这些批评的麻烦是：

A）If刷新时间小于250毫秒，图像不更新

B）图像闪烁

问题：
如何让图像每10ms刷新一次（或更少！更快更好......），而不闪烁？寻找一些想法。

编辑

我试过使用setTimeout，as由@tripleb建议，但没有区别，我可以告诉。

 函数refresh（）{
 //使用高速缓冲存储器查询更新src属性
 setTimeout（ refresh（）;，10）
} 
 
 refresh（）; 
  

解决方案

第二种方法最适合您的问题你正在使用setInterval，这不是一个好方法，因为如果前一个调用已准备完毕，它总是执行忽略。这可能是为什么小超时它只是锁定尝试

 函数refresh（）{
 // update src （）;} 10）
} 
 refresh（）; 
  

重复函数在第一个完成之前不会开始新的刷新。

PS对于任何真实世界的应用程序，10毫秒可能是快速的。

更新：10 mils是让浏览器快速呈现的方式，但是您只需让浏览器更新为快速，因为它可能做到这一点：$ b​​ $ b http://jsfiddle.net/zdws1mxv/

I have a server (AWS instance), which spits out an image file test.png every, say, 10ms.

I also have a webpage on the server called, say, index.html. Within that index.html, I have an image tag whose src="test.png".

Now, what I want to do is refresh that image (test.png) every 10ms. I know I can do this a number of ways:

• Use JS to reload the page (location.reload();)
• Use JS to update the src attribute (setInterval(refresh(),10); //with timestamp to force browser to reload - not from cache)
• Use JS and Ajax to hit the server for an image URL Use an HTML meta tag <meta http-equiv="refresh" content="5" />
• etc...

The trouble with these approches is that:

A) If the refresh time is less than 250ms, the image does not update

B) The image flickers

Question: How can I make the image refresh every 10ms (or less! faster is better...), without flickering? Looking for some ideas.

Edit

I have tried using setTimeout, as suggested by @tripleb, but there is no difference, that I can tell.

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

refresh();

解决方案

the second method would be the best your issue is probably that you are using setInterval, this not really a good method as it always executes ignoring if the previous call is ready or not. That is probably why for small timeouts it just "locks" try

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

a recurring function will not start a new refresh until the first is complete.

P.S. 10 milliseconds is probably WAY to fast for any real world application

UPDATE: 10 mils is way to fast for the browser to render however you gen just get the browser to update as fast as it possibly can by doing this: http://jsfiddle.net/zdws1mxv/

这篇关于每x毫秒刷新一次浏览器中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！