Hello. I have an image that will be present on many pages but will change from week to week. I would like to be able to just swap the image file each week while keeping the same file path to save updating time.

Obviously, upon the user revisiting the page, the original cached image will display since it has the same path name. Is there a way to avoid this?

Perhaps a javascript image swap that gets run at the end of the page to simply force a re-load of the image?

I don't believe there's an absolute way to force clearing the cache, but there do seem to be some solutions.

One is to add

<meta http-equiv="pragma" content="no-cache" />

in the head section of your page. I'm not sure if all browsers honor it. I don't think it will work in all of them.

Another option I found while searching is to add a random number to the end of the src.

src="your-image.jpg?state=random-number"

You can use whatever you want to generate the random number, but a suggestion would be to use a JavaScript Date Object. Since the date will always be changing, the browser will consider the image file to be new every time someone loads the page, though it should still grab the right image.

Thanks V, I'll try that. I figured there might be some javascript way to do it. I was at first thinking I'd manipulate the "title" text to change automatically in some way (like you mentioned) so it looked like new code to the browser but had the same file path to the image, but I wouldn't have thought of using your date object idea plus I wasn't sure if changing the title would have any influence on which image was loaded.

I was worried about the clear cache because of return users having to reload graphics for the whole page every time.

I'll try your idea. Thanks much!!

Duh! As I am writing this, I realize maybe I should just have that image in its own div and then I only change the background-image once in the css of THAT div every week!
Or is css page cached like other items?

Surely if you use a different file name and put this in an include file all your problems are solved.

The css file will be cached too so you'd have the same issue. Adding some parameter on the end based on the date/time will probably work best to force the image to be loaded on every page refresh.

If something changes within the css file (like a new image name for my div) doesn't it have to reload the css page? I read somewhere that most browsers will check the date on which a page was last updated, if the page has a more recent date than the one in cache, it will load the current one.

I can't seem to find a clear answer.
Does the browser look at a page and then match it line-for-line to the one in its' cache to determine if it has been updated?
OR
Does the browser check for the date the page was last updated?
OR
Does the browser only pay attention to the changed lines(thus loading new content) and call on the cache for the rest of the page? (e.g. It displays updated text on home page but uses the images in cache if the file paths match, etc.)

I think some of it depends on how you have your browser set. You can usually have it check for new pages under several circumstances.

If I'm not mistaken when the browser is checking to see if there's a new version of the page it will look at the html. Assuming your css is external the html link won't have changed. I don't think the browser goes looking for the line by line code in the css file, though I could be wrong. Sooner or later it will, but I'm not sure if it will check at the same time it's checking the html.

While working on a site I've noticed that most of the time it does use the newest css, but other times I seem to have to refresh a couple times before the new css is there.

I guess I'm not really sure what the answer to your question is. Hopefully someone behind us will know. Otherwise it will make for some interesting research.

Originally Posted by vangogh

I don't believe there's an absolute way to force clearing the cache, but there do seem to be some solutions.

One is to add

<meta http-equiv="pragma" content="no-cache" />

in the head section of your page. I'm not sure if all browsers honor it. I don't think it will work in all of them.

Another option I found while searching is to add a random number to the end of the src.

src="your-image.jpg?state=random-number"

You can use whatever you want to generate the random number, but a suggestion would be to use a JavaScript Date Object. Since the date will always be changing, the browser will consider the image file to be new every time someone loads the page, though it should still grab the right image.

yeah should be good on this