Topic: How to stop a browser from caching

[44085weather]

Is there a way to stop a browser from caching certain images on my site?

I have a few images that are updated every 60 seconds, is there a way to not have a browser cache them so that when you look at a page it changes the image with every refresh, or loading of a different page?
If it matters or helps I'm using wordpress

My page- http://www.44085weather.com/

[Jáchym]

Hi,
depends on whether you are loading the images using Javascript or PHP.

The general method to overcome this is always attach the current timestamp to the image URL, like this:

http://www......jpg?0123456

Any number will do, using a timestamp is easiest.

Anything after the ? is ignored by the browser if it is an image, but the browser will treat it as a unique link

[44085weather]

Hi,
depends on whether you are loading the images using Javascript or PHP.

The general method to overcome this is always attach the current timestamp to the image URL, like this:

http://www......jpg?0123456

Any number will do, using a timestamp is easiest.

Anything after the ? is ignored by the browser if it is an image, but the browser will treat it as a unique link

I've added ?0123456 behind all images that I do not want cached, and it still appears that my browser is caching the images.  A simple thing like like this should not frustrate me so much.

Back to the Drawing board...
For example:

Code: [Select]

<img class="aligncenter " src="http://www.44085weather.com/wd/KOHROME3.gif?0123456" width="711" height="478" />

[ValentineWeather]

Or go into CPanel and turn off image caching if your host allows.

[saratogaWX]

With wordpress, the image caching is likely automatic and set for the website.  Some WP cache plugins can allow customization of the cache interval and exclude some content types.  Using the ?{timestamp} on the image URL in the page is likely the only way to defeat browser-based caching.

[Jáchym]

Hi,
depends on whether you are loading the images using Javascript or PHP.

The general method to overcome this is always attach the current timestamp to the image URL, like this:

http://www......jpg?0123456

Any number will do, using a timestamp is easiest.

Anything after the ? is ignored by the browser if it is an image, but the browser will treat it as a unique link

I've added ?0123456 behind all images that I do not want cached, and it still appears that my browser is caching the images.  A simple thing like like this should not frustrate me so much.

Back to the Drawing board...
For example:

Code: [Select]

<img class="aligncenter " src="http://www.44085weather.com/wd/KOHROME3.gif?0123456" width="711" height="478" />

Hi,
sorry, I think you misunderstood me.

The 0123456 was just an example. The point is that this number must be some random number or current timestamp - i.e. a number that is constantly changing.

So, for example let's say you use a random number generator.

Then I visit your page and the image loads as .jpg?4562162, next time I visit the site, it loads as .jpg?975322 etc etc. It will load the same image, but the browser will "think" it is a different one and not use the cached one. So the point is to make the part after the ? changing.

[44085weather]

With wordpress, the image caching is likely automatic and set for the website.  Some WP cache plugins can allow customization of the cache interval and exclude some content types.  Using the ?{timestamp} on the image URL in the page is likely the only way to defeat browser-based caching.

How do I get it to timestamp  is there an html code I can use?

[Jáchym]

Hi,
no this cannot be done by HTML.

Either JavaScript or PHP, depends on what you use.

In php it would be for example

  <img src="http://www........jpg?<?php echo date("U");?>">

[44085weather]

is there a jave script snippet you could suggest for me to try? The PHP doesn't work in wordpress

[Jáchym]

You could try this, but I cannot guarantee it will work, WP is sometimes tricky

Replace the 2 urls in bold with the url of your image

<img id="myImg" alt="" src="http://www.....jpg" />

<script language="javascript" type="text/javascript">
    var d = new Date();
    document.getElementById("myImg").src = "http://www.....jpg?timestamp=" + d.getTime();
</script>

[44085weather]

ill give it a shot thanks