Question

我有一个应用程序，可以使用JavaScript动态加载图像并将它们绘制到画布上。图像可以更改，但我也想利用缓存，因此我使用上次修改的http标头并在未修改图像时发送304响应。这一切都很好，似乎工作......

但是有一件奇怪的事情正在发生（到目前为止只在Chrome和Safari OSX上测试过），偶尔浏览器会忽略发送图像请求！在脚本中，我创建了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

浏览器不应每次都为此图片发出新请求，因为它有最后修改过的标题？当我运行测试时，浏览器似乎每分钟只发出一个新请求（无论我尝试加载多少个同一图像的副本）......这是预期的行为吗？是否有一些标题组合会强制浏览器每次检查图像是否被修改？或者也许是一些可以解决问题的JavaScript魔术？

Answer 1

我猜你的问题是浏览器在本地缓存图像副本并使用它而不是往服务器进行往返？

我知道如果您使用jQuery及其ajax函数来获取资源，它会在请求结束时添加唯一编号，因此请求www.foo.com/bar.jpg将变成www.foo.com/bar.jpg?1234567。

这使得网址在会话中相当独特，因此浏览器不会只使用本地缓存的图像，而是前往服务器获取新副本。

这可以作为一种解决方法吗？

Answer 2

我不知道你是否找到了问题的解决方案，但我一直在努力解决同样的问题，我想我现在有了解决方案。我做的是使用ajax调用来发出请求，而不是将图像作为image / jpeg类型的文件返回，我将数据作为base64_encoded数据返回，在客户端我通过将src设置为数据来呈现img URI。使用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*/}
 });

这对我有用。我希望能帮助你。

强制浏览器发送图像的http请求

2 个答案: