我正在访问我的网站上的一个链接，每次访问它都会提供一个新的图像。
我遇到的问题是，如果我试图在后台加载图像，然后更新页面上的图像，图像不会改变——尽管在我重新加载页面时它会更新。
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
我需要强制刷新页面上的图像。什么好主意吗?
基于Doin的#4代码，下面的示例利用文档简化了代码。在iframe中写入而不是src来支持CORS。也只关注破坏浏览器缓存，而不是重新加载页面上的每个图像。
下面是用typescript编写的，并使用了angular的$q promise库，只是供参考，但应该很容易移植到普通javascript。方法意味着存在于typescript类中。
返回一个承诺，该承诺将在iframe完成重新加载时得到解决。没有经过严格测试，但对我们来说很好。
mmForceImgReload(src: string): ng.IPromise<void> {
var deferred = $q.defer<void>();
var iframe = window.document.createElement("iframe");
var firstLoad = true;
var loadCallback = (e) => {
if (firstLoad) {
firstLoad = false;
iframe.contentWindow.location.reload(true);
} else {
if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
deferred.resolve();
}
}
iframe.style.display = "none";
window.parent.document.body.appendChild(iframe);
iframe.addEventListener("load", loadCallback, false);
iframe.addEventListener("error", loadCallback, false);
var doc = iframe.contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body><img src="' + src + '"></body></html>');
doc.close();
return deferred.promise;
}
作为……的替代方案。
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上进行测试和工作。令人恼火的是，它在Safari上失败了，除非你使用…
Cache-Control: no-store
.．.尽管这可能比用数百个相同的映像填充上游缓存更可取，特别是当它们运行在您自己的服务器上时。: -)
更新(2014-09-28):现在看起来像是Cache-Control: Chrome也需要no-store。
我最终要做的是让服务器将对该目录下的图像的任何请求映射到我试图更新的源。然后，我让计时器在名称的末尾附加一个数字，这样DOM就会将其视为新图像并加载它。
E.g.
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);
}
