强制浏览器发送HTTP请求以获取图像

Question

强制浏览器发送HTTP请求以获取图像

javascriptimagehttp-headersbrowser-cache

5

我有一个使用JavaScript动态加载图片并将其绘制到画布上的应用程序。这些图片可能会更改，但我也想利用缓存，因此我使用了最后修改的http头，并在图像未更改时发送304响应。这很好用，而且似乎正在工作...

但是有一件奇怪的事情发生了（目前只在OSX上的Chrome和Safari上进行过测试），偶尔浏览器会忽略某个图片请求！在脚本中，我创建了一个new Image()，并且onload函数被触发，但是当我使用网络检查器时，请求根本没有被发出。我还可以确认服务器端没有收到请求。

最初的带有空缓存响应的请求具有以下标头：

Connection:keep-alive
Content-Length:25937
Content-Type:image/png
ETag:Thu, 10 May 2012 20:48:13 GMT
Last-Modified:Thu, 10 May 2012 20:48:13 GMT

浏览器不应该每次都为这个图片发送新的请求吗，因为它有last-modified头信息？当我进行测试时，浏览器似乎每分钟只会发送一次新的请求（无论我尝试加载多少个相同的图片）... 这是预期行为吗？是否有某些头信息组合可以强制浏览器每次都检查图片是否被修改？或者也许有一些JavaScript魔法可以解决这个问题？

- lakenen

你正在使用什么来发出请求？如果在一定的超时时间内看到对相同URI的请求，这可能是特定于您用于发出请求的方法或库的内容。 - ZachB

@ZachB 我没有使用任何库。我正在使用纯JS，即 var img = new Image(); img.onload = function () { /* ... */ }; img.src = "someimage.png"; - lakenen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pcardilla · Answer 1

我不知道你是否已经找到了解决方案，但我曾经也遇到过完全相同的问题，现在我认为我有了一个解决方案。我的做法是使用ajax调用来进行请求，而不是将图像作为image/jpeg类型的文件返回，我将数据作为base64编码数据返回，在客户端上通过将src设置为数据URI来呈现img。使用jQuery，代码大致如下：

jQuery.ajax({
    url: imageURL,
    headers: {'Max-Age':0},
    success: function(d){
                jQuery(imgElement).attr('src','data:image/jpeg;base64,'+d);
             },
    error: function(){/*handle error*/},
    complete: function(){/* handle complete*/}
 });

这对我有效。希望能对你有所帮助。