title: Possible to defer loading of jQuery?
body: <p>Let's face it, jQuery/jQuery-ui is a heavy download.</p>
  
  <p>Google recommends <a href="http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS" rel="noreferrer">deferred loading of JavaScript</a> to speed up initial rendering. My page uses jQuery to set up some tabs which are placed low on the page (mostly out of initial view) and I'd like to defer jQuery until AFTER the page has rendered.</p>
  
  <p>Google's deferral code adds a  tag to the DOM after the page loads by hooking into the body onLoad event:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   // Add a script element as a child of the body
   function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "deferredfunctions.js";
   document.body.appendChild(element);
   }
  
   // Check for browser support of event handling capability
   if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
   else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
   else window.onload = downloadJSAtOnload;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I'd like to defer loading of jQuery this way, but when I tried it my jQuery code failed to find jQuery (not completely unexpected on my part):</p>
  
  <pre><code>$(document).ready(function() {
      $("#tabs").tabs();
  });
  </code></pre>
  
  <p>So, it seems I need to find a way to defer execution of my jQuery code until jQuery is loaded. How do I detect that the added  tag has finished loading and parsing?</p>
  
  <p>As a corollary, it appears that <a href="http://code.google.com/speed/page-speed/docs/rtt.html#PreferAsyncResources" rel="noreferrer">asynchronous loading</a> may also contain an answer.</p>
  
  <p>Any thoughts?</p>