javascript - Refresh an image in the browser every x milliseconds - Stack Overflow

admin管理员组

文章数量:1387404

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();

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();

• javascript
• html
• ajax
• web

Share Improve this question Follow edited Nov 3, 2015 at 20:39 pookie asked Nov 3, 2015 at 13:22 pookiepookie 4,1421212 gold badges5959 silver badges118118 bronze badges 5

• More efficient or specifically resolve the issues? I can think of ways to resolve these issues but couldn't characterize them as more efficient. – J E Carter II Commented Nov 3, 2015 at 13:26
• @JECarterII Thanks, I've edited the question to be more clear. – pookie Commented Nov 3, 2015 at 13:29
• 1 loading an image every 10ms means that the client to server and back to client connection should be as fast as localhost all throughout the request. – Joe Commented Nov 3, 2015 at 13:29
• @Deadpool 10ms was an example. Anything up to about 30ms should be fine ;) . – pookie Commented Nov 3, 2015 at 13:36
• @pookie 30ms is still too fast. In 30ms the server would already receive 33 requests in just 1 second from 1 user. And on the client side, if the requests somehow returned properly without any delay the effect of updating an image every 30ms would make a lot of images just being overridden without making any impact to visual appearance. – Joe Commented Nov 3, 2015 at 13:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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 plete.

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/zdws1mxv/

How about asigning a random Math.random() to the end of the url and just using a setInterval to call and replace the image with a new random again every 10ms, the 10ms is very fast though. like they said above. Im not sure the purpose of this.

Example

HTML

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

JS

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);

---

Fiddle - https://jsfiddle/ToreanJoel/11fk17ck/1/

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , the minimum timeout value for nested timeouts was 10 ms.

hope this helped someone

Use the setInterval() method of the jquery to add the time interval. It takes interval in milisecond as parameter.

How about streaming? You can use node.js to push image data to client via web socket.

As discussed in ments, 10ms (1/100th of a second) is a bit quick for the mechanisms you are trying to use. Consider that full motion video is typically 30 frames per second (100 frames per second would be high speed video playback, not something a browser will well support by just pushing image requests).

Since it sounds like what you want to acplish is streaming video, I can remend the following as what we use here:

Streaming video source: https://obsproject./ Open Broadcast Project - you can use a variety of methods offered by this platform to produce a video stream. You can produce an rtmp stream with this.

Nginx Web Server: https://www.nginx./resources/wiki/ - handles rtmp streams very well.

Flowplayer: http://flash.flowplayer/plugins/streaming/rtmp.html - we put this on the nginx box and embed it in a web page served from there.

本文标签： javascriptRefresh an image in the browser every x millisecondsStack Overflow