XMLHttpRequest: Explicitly ENABLE browser-caching (binary data)

Question

Prelude

My Web-Application (Keywords: HTML, JavaScript, jQuery; Has to work in: IE8+, Chrome, FF) has to present live image data from a kind-of-WebCam. This "WebCam" integrates a webserver providing the live image data as BMP.

The image data is "downloaded" via settings the src attribute of an img tag.

The Issue

I want to analyze the image data client-side. To do so I'd like to pre-download the image using XMLHttpRequest (using this provided stackoverflow answer) and update the src attribute of the img tag afterwards. It is my understanding that the browser should then use the cached image data downloaded via XMLHttpRequest.

The issue is, that the browser (IE8+, FF and Chrome) issues another request to the server to download the image again (i.e. it does not use the cached data or the data is not cached in the first place).

How do I enable the browser to cache the data and to use it instead of issueing another request?

Appendix

The server sends a Cache-Control: max-age=5, public for Chrome and a Cache-Control: no-store, max-age=5 for all other browsers.

In Chrome I am able to handle the second request by sending a 304 Not Modified. The browser will THEN use the cached image. In all other (mentioned) browsers this does not work.

---

Update 1

I know, I could use Data URI Scheme to update the src attribute. However, this wouldn't work for IE8 (see requirements above) since IE8 supports such only with 32KB max.

Answer 1

I resolved the issue by doing the obvious:

1. Request the image via hidden img (by settings src) first. That way the image gets cached by the browser.

2. Request the image binary data via AJAX afterwards. Since the browser then uses the above cached data, I can analyze the image data, without issueing another request.

3. Update the src of the "visible" image.

That way I achieve what I need: Viewing a "live" image with prior data analysis wthout having to request the image twice.