1

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

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）。

我可以在我的 URL 中添加一个随机查询字符串，但它会消耗更多的带宽，因为大多数时候服务器会回复 304 Not modified。

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

4

2 回答 2

1

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

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

您可以使用图像最后一次更新的 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
于 2012-04-23T21:30:17.050 回答
0

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

于 2012-04-11T10:06:56.217 回答