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!