我正在访问我的网站上的一个链接，每次访问它都会提供一个新的图像。
我遇到的问题是，如果我试图在后台加载图像，然后更新页面上的图像，图像不会改变——尽管在我重新加载页面时它会更新。
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
我需要强制刷新页面上的图像。什么好主意吗?
在同一位置放置图像的第二个副本，然后删除原始图像。
function refreshImg(ele){
ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
ele.parentNode.removeChild(ele);
}
这将有效地刷新图像。
Crossbrowser。insertAdjacentHTML, outerHTML, parentNode和removecchild都是跨浏览器的。
在大多数情况下，性能损失几乎可以忽略不计。@Paolo Bergantino的答案可能比这个函数更好。使用他的答案，只有一个DOM元素受到影响。这个函数有两个元素。
作为……的替代方案。
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。
我改进了AlexMA的脚本，在网页上显示我的摄像头，并定期上传同名的新图像。我有问题，有时图像闪烁，因为一个破碎的图像或不完整(向上)加载的图像。为了防止闪烁，我检查了图像的自然高度，因为我的网络摄像头图像的大小没有改变。只有当加载的图像高度符合原始图像高度时，完整的图像才会显示在页面上。
<h3>Webcam</h3>
<p align="center">
<img id="webcam" title="Webcam" onload="updateImage();" src="https://www.your-domain.com/webcam/current.jpg" alt="webcam image" width="900" border="0" />
<script type="text/javascript" language="JavaScript">
// off-screen image to preload next image
var newImage = new Image();
newImage.src = "https://www.your-domain.com/webcam/current.jpg";
// remember the image height to prevent showing broken images
var height = newImage.naturalHeight;
function updateImage()
{
// for sure if the first image was a broken image
if(newImage.naturalHeight > height)
{
height = newImage.naturalHeight;
}
// off-screen image loaded and the image was not broken
if(newImage.complete && newImage.naturalHeight == height)
{
// show the preloaded image on page
document.getElementById("webcam").src = newImage.src;
}
// preload next image with cachebreaker
newImage.src = "https://www.your-domain.com/webcam/current.jpg?time=" + new Date().getTime();
// refresh image (set the refresh interval to half of webcam refresh,
// in my case the webcam refreshes every 5 seconds)
setTimeout(updateImage, 2500);
}
</script>
</p>
回答:你可以简单地使用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除外)。
I had this same issue using the Unsplash random image feature. The idea of adding a dummy query string to the end of the URL is correct, but in this instance a completely random parameter doesn't work (I tried it). I can imagine it's the same for some other services too, but for unsplash the parameter needs to be sig, so your image URL would be, for example, http://example.net/image.jpg?sig=RANDOM where random is a random string that will NOT be the same when you update it. I used Math.random()*100 but date is suitable too.
您需要这样做，因为如果没有它，浏览器将看到所述路径上的图像已经加载，并将使用缓存的图像来加速加载。
参见https://github.com/unsplash/unsplash-source-js/issues/9
