我正在访问我的网站上的一个链接，每次访问它都会提供一个新的图像。
我遇到的问题是，如果我试图在后台加载图像，然后更新页面上的图像，图像不会改变——尽管在我重新加载页面时它会更新。
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
我需要强制刷新页面上的图像。什么好主意吗?
在创建新图像之后，是否从DOM中删除旧图像并用新图像替换它?
您可以在每次updateImage调用时抓取新图像，但不将它们添加到页面。
有很多方法可以做到这一点。像这样的东西是可行的。
function updateImage()
{
var image = document.getElementById("theText");
if(image.complete) {
var new_image = new Image();
//set up the new image
new_image.id = "theText";
new_image.src = image.src;
// insert new image and remove old
image.parentNode.insertBefore(new_image,image);
image.parentNode.removeChild(image);
}
setTimeout(updateImage, 1000);
}
在得到工作后，如果仍然有问题，它可能是缓存问题，就像其他答案谈论。
在创建新图像之后，是否从DOM中删除旧图像并用新图像替换它?
您可以在每次updateImage调用时抓取新图像，但不将它们添加到页面。
有很多方法可以做到这一点。像这样的东西是可行的。
function updateImage()
{
var image = document.getElementById("theText");
if(image.complete) {
var new_image = new Image();
//set up the new image
new_image.id = "theText";
new_image.src = image.src;
// insert new image and remove old
image.parentNode.insertBefore(new_image,image);
image.parentNode.removeChild(image);
}
setTimeout(updateImage, 1000);
}
在得到工作后，如果仍然有问题，它可能是缓存问题，就像其他答案谈论。
<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>
然后在下面的一些javascript
<script language='javascript'>
function imageRefresh(img, timeout) {
setTimeout(function() {
var d = new Date;
var http = img.src;
if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; }
img.src = http + '&d=' + d.getTime();
}, timeout);
}
</script>
这个做的是，当图像加载时，安排它在1秒内重新加载。我在不同类型的家庭安全摄像头的页面上使用这个。
作为……的替代方案。
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。
