0

用IE 中的 + 或CtrlChrome中的++刷新页面后,大多数图像也会刷新,但从动态生成的 HTML 元素(通过 AJAX/jQuery)引用的少数图像则不会。动态 DOM 更新后获取的图像似乎总是命中缓存,即使页面是硬刷新的。F5CtrlShiftR

小提琴示例:http: //jsfiddle.net/dhDju/4/ (并使用 Chrome / IE 开发人员工具中的“网络”选项卡。)

这在 Chrome 和 IE 中是一致的 - Chrome 将显示“来自缓存”的图像请求,而 IE 根本不会显示它。似乎硬刷新不适用于页面上的后续 DOM 修改。

因此,除非我明确清除缓存,否则对这些图像的更改不会生效。

在使用 requires.js 时,我偶尔也会在脚本中看到这一点——在这种情况下,<script>标签也是动态生成的。

知道为什么会发生这种情况,或者如何解决?

cache-control/max-age 标头似乎对动态元素无关紧要。我的 QA 服务器没有缓存控制或过期标头,而动态元素仍然存在这个问题。我看到的主要区别是,如果没有缓存标头,“正常”<img>资源也将在使用 F5 或 Ctrl+R 软重新加载时使用条件 GET/304 未修改响应刷新。

我熟悉在发布后重命名文件的想法 - 这并不理想,因为这也会影响每个构建上的开发和 QA 服务器。每次构建后都必须告诉测试人员清除缓存也很烦人。所以我想知道是否有办法解决根本原因。

谢谢!

4

1 回答 1

0

我经常将网站版本值附加到 CSS、JS 和图像文件中。然后在更新后我可以增加版本,浏览器将加载最新的文件。例如:

<img src="picture.jpg?v=1.1">
于 2013-01-04T21:18:29.853 回答