Load and replace image with same name - load and cache image problem

Question

I am trying to load a image from the server (same name but always a new image) into the html page - tag: #webCamStageImage. So far I can load the image but the browser doesn't show me the new image - I guess it's a caching problem - because when I turn on "disable WebCore Cache" in Safari it works.

Heres my code:

setInterval(function()
{
  $("#webCamStageImage").attr({'src': "http://picture.jpg"});
}, 5000);

How can I change/ddelte/refresh the old image?

chris

Answer 1

Try adding random value to query string value so as to avoid caching:

var randNum = Math.floor(Math.random() 999 + 1);
setInterval(function()
{
  $("#webCamStageImage").attr({'src': "http://picture.jpg?rand=" + randNum});
}, 5000);

Answer 2

Try using a URL with a nonsense query string tacked onto it:

setInterval(function()
{
  $("#webCamStageImage").attr({'src': "http://picture.jpg?foo=" + new Date().getTime()});
}, 5000);

The browser treats the whole URL as the name of a cacheable entity, so by doing this you make it think that you're asking the server for something different (which indeed you might be). The server won't pay any attention to the query string (unless you know otherwise ...).