title: Pull in HTML resource in the background in jQuery
body: <p>On a page, there is a button. When the button is clicked, a dropdown shows up. The dropdown contains an image. The problem is that the image is not fetched until the user clicks the button.</p>
  
  <pre><code>$("#my_button").click(function(){
      $("#my_dropdown").html("&lt;img src=\"http://mysite.com/image.jpg\" /&gt;"); 
  });
  </code></pre>
  
  <p>I'd like to fetch the image when the page loads so it's ready to go when the user clicks the dropdown. How can I do this? I was thinking I could insert the image into the page with <code>display:none</code> set, so it'll get in the cache, or is there a way to load in when the document loads in jQuery?</p>
  
  <p>This is for a Chrome extension, if it makes any difference. I suppose I could put the image in the extension (and that would be faster), but I'm still curious if it's possible to load the image using JS.</p>
  
  <p>Thanks,
  Kevin</p>