在同一个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。