mardi 3 novembre 2015

Refresh an image in the browser every x milliseconds

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: What is a more efficient way of doing this? Looking for some ideas.




Aucun commentaire:

Enregistrer un commentaire