title: Why do browsers inefficiently make 2 requests here?
body: <p>I noticed something odd regarding ajax and image loading. Suppose you have an image on the page, and ajax requests the same image - one would guess that ajax requests would hit the browser cache, or it should at least only make one request, the resulting image going to the page and the script that wants to read/process the image.</p>
  
  <p>Surprisingly, I found that even when the javascript waits for the entire page to load, the image request still makes a new request! Is this a known bug in Firefox and Chrome, or something bad jQuery ajax is doing?</p>
  
  <p><a href="http://jsfiddle.net/95mnf9rm/1/" rel="nofollow">Here you can see the problem</a>, open Fiddler or Wireshark and set it to record before you click "run":</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;div id="something" style="background-image:url(http://jsfiddle.net/img/logo-white.png);"&gt;Hello&lt;/div&gt;
  &lt;script&gt;
  
  jQuery(function($) {
      $(window).load(function() {
          $.get('http://jsfiddle.net/img/logo-white.png');
      })
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Note that in Firefox it makes two requests, both resulting in 200-OK, and sending the entire image back to the browser twice. In Chromium, it at least correctly gets a 304 on second request instead of downloading the entire contents twice.</p>
  
  <p>Oddly enough, IE11 downloads the entire image twice, while it seems IE9 aggressively caches it and downloads it once.</p>
  
  <p>Ideally I would hope the ajax wouldn't make a second request at all, since it is requesting exactly the same url. Is there a reason css and ajax in this case usually have different caches, as though the browser is using different cache storage for css vs ajax requests?</p>