用同一网址上的新图片刷新图片

Question

我正在访问我网站上的一个链接，每次访问该链接时都会提供一个新图像。

我遇到的问题是，如果我尝试在后台加载图像然后更新页面上的图像，图像不会改变——尽管当我重新加载页面时它会更新。

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 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT

我需要强制刷新页面上的那个图像。有任何想法吗？

原文由 QueueHammer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我最终做的是让服务器将对该目录中图像的任何请求映射到我试图更新的源。然后我让计时器在名称的末尾附加一个数字，以便 DOM 将其视为新图像并加载它。

例如

http://localhost/image.jpg
 //and
 http://localhost/image01.jpg

将请求相同的图像生成代码，但在浏览器中看起来像不同的图像。

 var newImage = new Image();
 newImage.src = "http://localhost/image.jpg";
 var count = 0;
 function updateImage()
 {
 if(newImage.complete) {
 document.getElementById("theText").src = newImage.src;
 newImage = new Image();
 newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
 }
 setTimeout(updateImage, 1000);
 }

原文由 QueueHammer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试在 url 的末尾添加一个 cachebreaker：

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

这将在您创建图像时自动附加当前时间戳，并且它将使浏览器再次查找图像而不是从缓存中检索图像。

原文由 Paolo Bergantino 发布，翻译遵循 CC BY-SA 2.5 许可协议