title: PreLoad and cache image in jQuery for "loading" icon (or any better solution)
body: <p>I am working with <a href="http://jqueryui.com/demos/tabs/#manipulation" rel="nofollow noreferrer">dynamic tabs</a> in <strong>jQuery</strong>. When the user opens a new tab, the content is loaded via <strong>ajax</strong>:</p>
  
  <pre><code>function addTab(tabId) {
      $("#tabs").tabs('add', tabId, tabId);
      $(tabId).load("...");
  }
  </code></pre>
  
  <p>I want to display a loading icon while the content is being loaded. So I am setting the tab panel content in the <strong>add</strong> property of the tabs method:</p>
  
  <pre><code>var $tabs = $("#tabs").tabs({
          tabTemplate: '&lt;li&gt;&lt;a href="#{href}"&gt;#{label}&lt;/a&gt;&lt;/li&gt;',
          add: function(event, ui) {
              $(ui.panel).append('&lt;div&gt;loading...&lt;/div&gt;');
          }
      });
  </code></pre>
  
  <p>This is working great so far, the tab content is created showing "loading..." and then replaced by the proper content when it has been fetched.</p>
  
  <p>What I'd like to do though is show one of the animated loading images. Obviously if I have to download that image every time then it kind of defeats the point. </p>
  
  <p>I'm thinking I need to background load the image into memory on <strong>$(document).ready</strong> and then just put that image into my loading divs whenever they are required somehow. I have no idea how to go about that though. Or maybe there is a much simpler and better solution? </p>
  
  <p>Note that there could be many tabs loading at the same time, and not all loading tabs are visible (a new tab can be background loaded without leaving the current tab), so just having one shared div which I show/hide on top of everything else doesn't work.  </p>
  
  <p>Any pointers apprectiated, thanks.</p>