title: Handling code which relies on jQuery before jQuery is loaded
body: <p>I'd like to follow the general guideline of putting all JavaScript at the very bottom of the page, to speed up loading time and also to take care of some pesky issues with conflicting jQuery versions in a web app (Django).</p>
  
  <p>However, every so often I have some code, code which depends on jQuery, but which must be further up on the page (basically the code can't be moved to the bottom).</p>
  
  <p>I'm wondering if there's an easy way to code this so that even though jQuery is not yet defined the code works when jQuery is defined.</p>
  
  <p>The following seems, I have to say, like overkill but I don't know of another way to do it:</p>
  
  <pre><code>function run_my_code($) {
      // jquery-dependent code here
      $("#foo").data('bar', true);
  }
  var t = null;
  function jquery_ready() {
      if (window.jQuery &amp;&amp; window.jQuery.ui) {
          run_my_code(window.jQuery);
      } else {
          t = window.setTimeout(jquery_ready, 100);
      }
  }
  t = window.setTimeout(jquery_ready, 100);
  </code></pre>
  
  <p>Actually, I might need to use code more than once in a page, code that doesn't know about other code, so even this probably won't work unless I rename each jquery_ready to something like jquery_ready_<em>guid</em>, jquery_ready_<em>otherguid</em> and so on.</p>
  
  <h1>Clarification</h1>
  
  <p>Just so this is clear, I am putting the include to JavaScript (<code>&lt;script type="text/javascript" src="jquery.min.js" /&gt;</code>) at the <strong>very bottom</strong> of the page, just before the <code>&lt;/body&gt;</code>. So I can't use the <code>$</code>.</p>