0

After refreshing a page with Ctrl+F5 in IE or Ctrl+Shift+R in Chrome, most of the images also refresh, but a few that are referenced from dynamically generated HTML elements (via AJAX/jQuery) are NOT. The images that are fetched after dynamic DOM updates seem to always hit the cache, even though the page was hard-refreshed.

Example fiddle: http://jsfiddle.net/dhDju/4/ (and use "Network" tab in Chrome / IE developer tools.)

This is consistent in Chrome and IE - Chrome will show the image request "from cache" and IE will not show it at all. It seems like the hard-refresh doesn't apply to subsequent DOM modifications on the page.

So changes to those images don't take effect unless I explicitly clear my cache.

I've occasionally seen this with scripts as well, when using requires.js - in that case the <script> tag is also generated dynamically.

Any idea why this happens, or how to fix it?

The cache-control/max-age headers don't seem to matter for the dynamic elements. My QA servers have no cache-control or expires headers and I still have this issue with dynamic elements. The main difference I see is that, without cache headers, "normal" <img> resources will also refresh with conditional GET/304 not modified responses on a soft reload with F5 or Ctrl+R.

I'm familiar with the idea of renaming files after releases - not ideal because this also impacts development and QA servers on each build. It's also annoying to have to tell testers to clear their cache after every build. So I'm wondering if there's a way to address at root cause.

Thanks!

wrschneider
  • 15,487
  • 10
  • 70
  • 152
  • which primefaces component are you using? – Rafay Jan 04 '13 at 21:16
  • For development, you can do a "hard" (i.e., cache-ignoring) refresh with `Ctrl+R` in IE, `Shift+F5` in Chrome, and `Ctrl+Shift+R` in Firefox. This doesn't solve the issue if it's a problem in production code, though, since the end user won't know to do that. – apsillers Jan 04 '13 at 21:19
  • @apsillers my point was that `Ctrl+R` and `Shift+F5` are NOT refreshing certain images from the cache. – wrschneider Jan 04 '13 at 21:21
  • @wrschneider99 Sorry, you didn't say that in your question. You only mentioned `F5` and `Ctrl+R`, which do soft (cache-respecting) refreshes. You should update the question to note that hard refreshes also do not work. – apsillers Jan 04 '13 at 21:23
  • Sorry, that confusion was my own fault -- IE does hard refreshes with **`Ctrl+F5`** not `Ctrl+R` (which, of course, merely does a soft refresh). I see now why you thought I meant soft refreshes in my first comment. (The other hard-refresh key combos I gave are correct.) – apsillers Jan 04 '13 at 21:29

1 Answers1

0

I'll often append a website version value to CSS, JS, and image files. Then after an update I can increment the version and browsers will load the latest files. For example:

<img src="picture.jpg?v=1.1">
hansvedo
  • 446
  • 2
  • 5
  • see comment above - the issue is not just releases, but even incremental builds in development where `Ctrl+R` / `Shift+F5` don't work – wrschneider Jan 04 '13 at 21:22
  • If that's not an option you can also disable cache during development: http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – hansvedo Jan 04 '13 at 21:28