Question

I have some javascript code that loads images dynamically in a web page:

imageSrc = pid.toString() + '/' + imageName + '/' + num.toString();
//imageSrc = pid.toString() + '/' + imageName; 

The first line works fine, but using the second line causes the images to not change after being loaded. I used firebug to capture the headers from the server:

Content-Length  43
Allow   GET, HEAD
Expires Sun, 28 Jan 2007 00:00:00 GMT
Server  CherryPy/3.1.2
Pragma  no-cache
Cache-Control   no-cache, must-revalidate
Date    Sun, 13 Feb 2011 21:12:31 GMT
Content-Type    image/x-png

And I’ve also added the line <meta http-equiv="Cache-control" content="no-cache">
to the head of the web page.

The problem occurs in firefox, IE, and chrome, so I think it must be a fundamental problem, and not a browser issue. Any help would be appreciated.

Answer 1

The typical way to defeat the cache is to append a search string (note the question mark after PNG):

img.src = path +"/"+ name + ".png?" + (new Date().getTime());

BTW, you don’t need to do .toString(), because the act of adding variables together makes them a string:

"a" + 1 + 1; // "a11"