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

Question

我有一个应用程序，它使用 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

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

Answer 1

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

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