title: Image not loading from cache after it's loaded in an iframe
body: <p>I'm loading an image in an iframe and then (once the iframe is loaded) loading the image on the page. But most browsers seem to be loading the image twice. <strong>Why isn't the <code>img</code> tag being loading from the cache?</strong></p>
  
  <p>Something like this:</p>
  
  <pre><code>var loader = $('&lt;iframe /&gt;').appendTo('body')[0];
  loader.onload = function() {
      $('body').append('&lt;img src="' + imgsrc + '" /&gt;');
  };
  loader.src = imgsrc;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/amirshim/na3UA/" rel="nofollow noreferrer">http://jsfiddle.net/amirshim/na3UA/</a></p>
  
  <p>I'm using <a href="http://www.fiddler2.com/fiddler2/" rel="nofollow noreferrer">fiddler2</a> to see the network traffic.</p>
  
  <p>In case you want to know why I want to do this, check out <a href="https://stackoverflow.com/questions/4926215/cancel-single-image-request-in-html5-browsers/4979270">this question</a></p>