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

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

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元素受到影响。这个函数有两个元素。

其他回答

基于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;
    }
document.getElementById("img-id").src = document.getElementById("img-id").src

将自己的SRC设置为自己的SRC。

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

作为……的替代方案。

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。

回答:你可以简单地使用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除外)。