XMLHttpRequest：显式启用浏览器缓存（二进制数据）

Question

前奏

我的 Web 应用程序（关键字：HTML、JavaScript、jQuery；必须在中工作：IE8+、Chrome、FF）必须呈现来自某种类型的实时图像数据-网络摄像头。这个“网络摄像头”集成了一个网络服务器，以BMP 提供实时图像数据。

通过设置img 标签的src 属性“下载”图像数据。

问题

我想在客户端分析图像数据。为此，我想使用XMLHttpRequest（使用this provided stackoverflow answer）预下载图像，然后更新img 标签的src 属性。我的理解是浏览器应该然后使用通过XMLHttpRequest下载的缓存图片数据。

问题是，浏览器（IE8+、FF 和 Chrome）向服务器发出另一个请求以再次下载图像（即它不使用缓存的数据或数据一开始就没有缓存）。

如何让浏览器缓存数据并使用它而不是发出另一个请求？

附录

服务器为 Chrome 发送Cache-Control: max-age=5, public，为所有其他浏览器发送Cache-Control: no-store, max-age=5。

在 Chrome 中，我可以通过发送 304 Not Modified 来处理第二个请求。浏览器将使用缓存的图像。在所有其他（提及的）浏览器中，这不起作用。

---

更新 1

我知道，我可以使用Data URI Scheme 来更新src 属性。但是，这不适用于 IE8（请参阅上面的要求），因为 IE8 仅支持最大 32KB。

Answer 1

我通过显而易见的方式解决了这个问题：

1. 通过隐藏的img（通过设置src）首先请求图像。这样图片就会被浏览器缓存起来。

2. 之后通过 AJAX 请求图像二进制数据。由于浏览器随后使用上述缓存数据，我可以分析图像数据，而无需发出另一个请求。

3. 更新“可见”图像的src。

这样我就实现了我所需要的：通过事先数据分析查看“实时”图像，而无需两次请求图像。