controlling browser cache

Question

so suppose i have a whole bunch of images in a page, and then I go to a different url that has the exact same images and layout, since the url is different the browser will reload all images,layout etc and will not display them from the cache even though they are the exact same images/layout....

is there a way to prevent this and control the way browser caches things using only javascript, php, or html?

EDIT/Addition

also what's interesting is that first of all I have two copies of the same site, one on my local server and another one on a remote hosting server.....

the one on the local server caches perfectly and none of the images reappear, whereas if I access the one on the remote server, the images would try to reappear....despite the fact that the files,etc are virtually identical between the local and remote server...

EDIT/Addition

Another interesting thing....the caching would work on IE and Chrome even for the remote server, but for some reason, it would screw up in firefox....

on the other hand the one in the local server would work even for firefox

Answer 1

would asking the browser cache by using headers not help

    header("Cache-Control: private, max-age=5400, pre-check=5400");
    header("Pragma: private");
    header("Expires: " . gmdate("D, d M Y H:i:s"). " GMT");

there a good site to check returned headers http://redbot.org try it out it may help plus theres http://www.mnot.net/cache_docs/ you may want to look at if you dont figger your answer.

Answer 2

Images if they have a fixed directory /images/image1.jpg will not be re-fetched unless you have set your headers to no-cache. It should not re download all the images that were on another page.

Test this with any variety of tools, for instance Firebug with Firefox or Safari / Chrome webkit web developer tracking. It will notify you if it was being cached or re-downloaded.

Hope that is what you are asking...