0

I have a web page of which most of the assets have changed recently. But when I load the page for the first time, it shows the old images, yet if I refresh the page, it loads the new ones.

So please tell me how to load the new images directly from the server when I open the page for the first time.

I suspect this has something to do with caching?

Patrick Geyer
  • 1,515
  • 13
  • 30
Mungunbat Enkhbayar
  • 171
  • 2
  • 15
  • When opening the page for the VERY first time, the images will be fetched from the server. If you have already visited the website before, and the images were cached, only a refresh action will work to see the old images. This is because you told the browsers to cache the images in the first place... – Salketer Sep 17 '13 at 13:59
  • What you are asking about is Browser Caching- you can use ctrl-f5 to force a reload, but knowing that is the name of your problem, perhaps you could find an answer here: http://stackoverflow.com/questions/1922910/force-browser-to-clear-cache – glenatron Sep 17 '13 at 14:00
  • the images are cached. press Ctrl + F5 – Mohsen Safari Sep 17 '13 at 14:01

2 Answers2

0
<FilesMatch "\.(png|jpg)$">
    FileETag None
    <ifModule mod_headers.c>
        Header unset ETag
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
    </ifModule>
</FilesMatch>

Put that in the .htaccess file.

Patrick Geyer
  • 1,515
  • 13
  • 30
  • Works only for HTML files, not images – Reeno Sep 17 '13 at 14:08
  • @Reeno Oh, ok. Couldn't one somehow put something like this into the server configuration file? – Patrick Geyer Sep 17 '13 at 14:10
  • Stackoverflow eats my line breaks... Here's the code: http://pastebin.com/sCdE1MCg – Reeno Sep 17 '13 at 14:14
  • Yes, your new edit should work. But I think (I'm not sure) it only works if you apply it from the beginning. Now that the files are already cached it might be the wrong way to force a refresh. – Reeno Sep 17 '13 at 14:16
  • Removing caching altogether would slow client-side load times on subsequent reloads. Unless the project has a requirement for zero caching, it's preferable to refresh the cache when an asset is changed. – odlp Sep 17 '13 at 14:20
  • @Oli true, that definitely is a valid point if you're dealing with a content-rich site. Else I doubt the difference in loading would make a noticeable difference. – Patrick Geyer Sep 17 '13 at 14:22
  • It makes a huge difference, even with only a few already compressed images on a site... – Reeno Sep 17 '13 at 14:24
  • OK, you're probably right. I don't have much experience with web servers :) – Patrick Geyer Sep 17 '13 at 14:26
  • Your code prevents any caching from the beginning. Mungunbat Enkhbayar was asking how to bypass caching if it's already active. – Reeno Sep 17 '13 at 14:38
  • Oh! Thanks. I'll leave the answer up in case anyone else finds it useful. – Patrick Geyer Sep 17 '13 at 14:41
0

If you include a query string after the image name, and increment the value each release, this will make the browser download the new asset.

E.g.

http://www.example.com/image1.jpg?v=1 - on first release http://www.example.com/image1.jpg?v=2 - on the next release

This also works for stylesheets, JS and other external resources.

odlp
  • 4,984
  • 2
  • 34
  • 45