Author Topic: How to stop a browser from caching  (Read 997 times)

0 Members and 1 Guest are viewing this topic.

Offline 44085weather

  • Senior Member
  • **
  • Posts: 60
    • 44085weather.com
How to stop a browser from caching
« on: March 14, 2017, 06:02:18 PM »
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/

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8604
    • Meteotemplate
Re: How to stop a browser from caching
« Reply #1 on: March 14, 2017, 06:10:58 PM »
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

Offline 44085weather

  • Senior Member
  • **
  • Posts: 60
    • 44085weather.com
Re: How to stop a browser from caching
« Reply #2 on: March 14, 2017, 06:46:51 PM »
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" />

Offline ValentineWeather

  • Forecaster
  • *****
  • Posts: 6230
    • LiVE WEATHER
Re: How to stop a browser from caching
« Reply #3 on: March 14, 2017, 06:47:44 PM »
Or go into CPanel and turn off image caching if your host allows.
Randy

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 8621
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: How to stop a browser from caching
« Reply #4 on: March 14, 2017, 06:57:45 PM »
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.
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis VP1+ FARS, Boltek-PCI/NexStorm, microSferics ToA, Blitzortung RED, GRLevel3, WD, WL, VWS, Cumulus, Meteobridge/hub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8604
    • Meteotemplate
Re: How to stop a browser from caching
« Reply #5 on: March 14, 2017, 07:07:14 PM »
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.

Offline 44085weather

  • Senior Member
  • **
  • Posts: 60
    • 44085weather.com
Re: How to stop a browser from caching
« Reply #6 on: March 14, 2017, 07:36:05 PM »
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?

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8604
    • Meteotemplate
Re: How to stop a browser from caching
« Reply #7 on: March 14, 2017, 07:50:16 PM »
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");?>">

Offline 44085weather

  • Senior Member
  • **
  • Posts: 60
    • 44085weather.com
Re: How to stop a browser from caching
« Reply #8 on: March 14, 2017, 08:42:54 PM »
is there a jave script snippet you could suggest for me to try? The PHP doesn't work in wordpress

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8604
    • Meteotemplate
Re: How to stop a browser from caching
« Reply #9 on: March 14, 2017, 08:51:37 PM »
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>

Offline 44085weather

  • Senior Member
  • **
  • Posts: 60
    • 44085weather.com
Re: How to stop a browser from caching
« Reply #10 on: March 14, 2017, 09:04:59 PM »
ill give it a shot thanks

 

anything