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

Make sure to accept an answer if it solves your problem by clicking the check mark to the left of it :) — Nick Craver
– Nick Craver, Commented Jul 17, 2010 at 16:17

Pointy · Accepted Answer · 2010-07-17 15:32:01Z

9

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

answered Jul 17, 2010 at 15:32

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chris Over a year ago

Thanks a thousand times. It works... Just to make me understand it. The file is loades the same way into the browser but because of the string in the request it write the cached file over? or doe it clear the the browser cache for that file? Thank u for helping... chris

Pointy Over a year ago

It does not clear the cache, but that shouldn't really bother you. The cache entry will be marked by the complete URL; if you repeated the exact same request with the exact same value for "foo", then you'd get the cached version. That's why my example used the system clock. You could also use a simple counter, or a random number generator.

Krahmal Over a year ago

Well, my android app load image from server. So it (does not refresh with same url) is a server behavior, not a bug in client, right? What is this phenomenon' s name?

Pointy Over a year ago

@Krahmal "caching"

Sarfraz · Accepted Answer · 2010-07-17 15:31:38Z

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

answered Jul 17, 2010 at 15:31

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related