Question

我想刷新在服务器上定期更新的图像，所以我加载它：

var img = new Image();
img.onload = myCallback;
img.src = imageUrl;

imageUrl始终是相同的，我设置这些HTTP标头以强制浏览器每次尝试加载图像时都发出新请求：

Cache-Control: public,max-age=0
Expires: -1
Last-modified: Mon, 21 Nov 2008 01:03:33 GMT
ETag: 1234

但它只适用于Chrome; Firefox，Opera，IE和Safari只在第一次向服务器发送请求，然后我总是得到缓存的图像。

如果我将img.src =''添加到myCallback，它可以在Opera和IE上运行，但仍然不在Firefox和Safari中（我只尝试过Firefox 11）。

我可以在我的网址中添加一个随机查询字符串，但它会消耗更多带宽，因为大多数情况下服务器回复304未修改。

有没有办法让它在Firefox上运行？

Answer 1

您可以将其分为两步，而不是依赖于不一致的浏览器和服务器行为：

对一个URL进行AJAX调用，客户端可以使用该URL来查明图像是否已更新（强制该图像没有缓存）
如果已更新，请使用新网址（附加到基本网址的新字符串）更新image.src

您可以使用类似于上次更新图像的UNIX时间戳之类的内容作为附加到URL的随机字符串。

使用JQuery样式伪代码的示例（可能或可能不按原样工作）：

function updateImage() {
    $.get('/HasImageBeenUpdated?', function(answer) {
       // answer could be JSON: {wasUpdated: true, newImageUrl: 'url'} 
       if (answer.wasUpdated === true) {
            $('#theImage').attr('src', answer.newImageUrl);
        }
    });
}
setInterval(updateImage, 1000); // update every second

Answer 2

要每次覆盖缓存，请在URL的末尾附加一个随机数作为参数。

没有新请求具有相同URL的新图像

2 个答案: