Question

我们正在开发一个Web应用程序，其中界面完全使用AJAX / Javascript。

某些动态图片的缓存到期时间为15分钟。因此，当正常访问图像时，它们会被缓存15分钟，然后在此时间之后，浏览器将获取新版本，再次缓存15分钟，依此类推。

问题在于，在这个AJAX设置中，即使删除然后添加图像元素，新添加的图像元素（可能超过15分钟，当浏览器通常会获取新图像版本时）也不包含新内容。即一旦图像被加载一次，即使在删除元素之后，如果在任何其他阶段重新添加此元素而不更改页面，则只显示最初加载的版本。

到目前为止，这个问题出在Chrome上，我还没有测试过其他浏览器。即使删除了图像元素，图像也会显示在“内存”中，图像会显示在Chrome开发者工具的“资源”下 - 同样，在指定此图像源的图像元素被删除后很长时间。 / p>

我该怎么办？到目前为止唯一的解决方案是在后续加载时更改图像文件名（也许是旧的查询字符串技巧）。这里的问题是这些图像然后堆叠在开发人员工具的“资源”选项卡中，就好像它们被保持打开一样，尽管图像元素被移除了。

希望这是有道理的。有什么想法吗？我真的只是想要Chrome（也许是其他有这个问题的浏览器）正确加载图像而不管新图像元素的来源。那是..检查缓存的路由，如果从服务器和缓存中再次获取过期。

干杯

Answer 1

我解决这个问题的方法是将随机查询字符串附加到图像的路径上。例如：

<img src="myimage.gif">

成为

<img src="myimage.gif?a=randomnumber">

随机数将强制浏览器获取最新版本。