javascript - 清除特定图像的缓存

Question

我目前正在开发一个在线拍卖网站(抱歉，我无法在此处分享链接)。在产品列表上，我们的客户希望产品图片在后端修改时能够实时动态更新。下面的解决方案可以解决问题:

var nocache = new Date().getTime();             
$('#auction_id_' + aucId + ' img#' + imgID).attr("src", 'ItemPics/t' + new_image_url + '?' + nocache);

但是当用户访问产品，然后点击后退按钮返回产品列表页面时 - 产品图片的缓存并没有被清除，旧图片又回来了。

我无法禁用网站上的缓存，因为它会导致客户端负载过多。

(1) 我考虑过创建一个隐藏的 iframe，将图像作为 SRC，然后实时刷新。 (2) 简单地重新加载页面并不能解决问题，所以我还考虑过使用 JavasSript 操作 Ctrl + F5，以在用户单击后退按钮时强制请求新的图像数据 = 但我认为这些都不正确方法来做到这一点。

任何想法将不胜感激，谢谢!

Answer 1

您可能可以在网络服务器中进行配置，使用 Cache-Control: no-cache, max-age=0, Must-revalidate, no-store 为图像请求返回 HTTP header 我相信将强制浏览器不在缓存中存储图像数据。

查看 Firefox 中如何处理缓存控制 header :https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching_FAQ