我正在访问我的网站上的一个链接,每次访问它都会提供一个新的图像。
我遇到的问题是,如果我试图在后台加载图像,然后更新页面上的图像,图像不会改变——尽管在我重新加载页面时它会更新。
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);
}
在得到工作后,如果仍然有问题,它可能是缓存问题,就像其他答案谈论。
我通过servlet将数据发送回来解决了这个问题。
response.setContentType("image/png");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setDateHeader("Expires", 0);
BufferedImage img = ImageIO.read(new File(imageFileName));
ImageIO.write(img, "png", response.getOutputStream());
然后从页面中给它一个带有一些参数的servlet,以获取正确的图像文件。
<img src="YourServlet?imageFileName=imageNum1">
回答:你可以简单地使用fetch和缓存选项设置为'reload'来更新缓存:
fetch("my-image-url.jpg", {cache: 'reload', mode: 'no-cors'})
下面的函数将更新缓存并重新加载页面中的图像:
async function reloadImg(url) {
await fetch(url, { cache: 'reload', mode: 'no-cors' })
document.body.querySelectorAll(`img[src='${url}']`)
.forEach(img => img.src = url)
}
它返回一个承诺,所以如果你愿意,你可以像await reloadImg("my-image-url.jpg")一样使用它。
如今,fetch API几乎在任何地方都可用(当然,IE除外)。