10

How would I go about updating an image that gets updated on a server every couple of seconds with out the user having to hit the refresh button, my first guess was ajax but I haven't really worked with it before. Could someone point me in the right direction?

EDIT: Forgot to mention that the image is a .gif generated by a perl script - trying to get it from url returns the script itself.

Gunslinger
  • 1,456
  • 7
  • 22
  • 36
  • You say "trying to grab it by url return a script", but you imply that you can currently reload the image by refreshing the page. So, there must be a url that fetches the image. Will you please edit your question to include the html for the img tag that you find when you view source? – gilly3 Jun 28 '11 at 17:01
  • @gilly3 there is no page page source the entire page is simply an image that gets generated by a perl script, hence there is no img tag, there is no html. I wanted to grab that image in put it in a webpage and refresh it to update the image that gets generated from the perl script. – Gunslinger Jun 30 '11 at 15:56

6 Answers6

13

No AJAX is necessary, just update the image's src property. But, since it has the same url, you have to give the browser a unique address to ensure you don't just load the old image from the browser's cache. You can guarantee a unique image by getting the current date's serial number via new Date().valueOf() and appending that to the url as a querystring.

$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

You can also use new Date().getTime() to get the serial number, or just coerce the date to a number: +new Date()

To do it on a timer use setInterval(). This would be the complete code that you could just drop inside a script tag in your page's <head>:

$(function() {
   var intervalMS = 5000; // 5 seconds
   setInterval(function() {
      $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
   }, intervalMS);
});
gilly3
  • 87,962
  • 25
  • 144
  • 176
10

Do something like

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

This changes the src attribute of your image tag (with id "yourimage") and adds a random query string to it, forcing the browser to reload the image each time you change it.

To reload the image every 5 seconds, do something like:

window.setInterval(function()
{
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);
Steffen
  • 2,235
  • 13
  • 19
4

just use javascript to update the src property of the img.

HTML: 

<img src="..." id="myImage" />

JS: 

document.getElementById("myImage").src = "http://....";

If you want it on a timer, do something like this: 

setInterval(function() { ... }, 4000);

If you have an issue with caching, add a random query string to the end of the url: "?rnd=randomNumberHere"

Steve
  • 31,144
  • 19
  • 99
  • 122
4

It seems there is something wrong with your Perl script. Trying to access the image by the URL should return an image anyway. It should return binary data and not a script. You should also set the Content-type header of the response to image/gif. Verify if it indeed returns binary data before trying to fix your JavaScript code.

lbrandao
  • 4,144
  • 4
  • 35
  • 43
1

Adding a time span to the end of the image URL worked for me.

var imagePath = "http://localhost/dynamicimage.ashx";

$("#imgImage").attr("img", imagePath + &ts" + (new Date()),toString() );

Dulanjana Wickramatantri
  • 476
  • 3
  • 7
0

every X seconds send Ajax to server. if link of image from response == previous, no update, if link new: $('img.class').attr('src','link');

korywka
  • 7,537
  • 2
  • 26
  • 48