在同一个url中使用新的刷新图像

Question

在同一个url中使用新的刷新图像我是访问我的网站上的一个链接，将提供一个新的图像，每次访问。我遇到的问题是，如果我尝试在后台加载图像，然后更新页面上的图像，则图像不会改变-尽管当我重新加载页面时会更新它。var newImage = new Image();newImage.src = "http://localhost/image.jpg";function updateImage(){if(newImage.complete) {     document.getElementById("theText").src = newImage.src;     newImage = new Image();     number++;     newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();}     setTimeout(updateImage, 1000);}当Firefox看到它们时，标题：HTTP/1.x 200 OKCache-Control: no-cache, must-revalidatePragma: no-cacheTransfer-Encoding: chunkedContent-Type:  image/jpegExpires: Fri, 30 Oct 1998 14:19:41 GMTServer: Microsoft-HTTPAPI/1.0Date: Thu, 02 Jul 2009 23:06:04 GMT我需要强制刷新页面上的图像。有什么想法吗？

Answer 1

尝试在url的末尾添加一个缓存断路器：

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

这将在创建图像时自动追加当前时间戳，并使浏览器重新查找图像，而不是检索缓存中的图像。

Answer 2

作为替代.。

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

.看起来.

newImage.src = "http://localhost/image.jpg#" + new Date().getTime();

.足够欺骗浏览器缓存而不绕过任何上游缓存，前提是您返回正确的Cache-Control标题。尽管你可以用.。

Cache-Control: no-cache, must-revalidate

.你失去了If-Modified-Since或If-None-Match标题所以就像.。

Cache-Control: max-age=0, must-revalidate

.应该防止浏览器重新下载整个图像，如果它没有真正改变。测试并在IE，Firefox和Chrome上工作。令人恼火的是，除非你用.

Cache-Control: no-store

虽然这可能仍然比用数百个相同的映像填充上游缓存更可取，特别是当它们在您自己的服务器上运行时。；-)

现在看起来Cache-Control: no-store也需要Chrome。