title: Using async not working $ is not defined
body: <p>I am having a error if I used async in script tag like below</p>
  
  <pre><code>&lt;script async src="main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The error shows only on chrome saying</p>
  
  <pre><code>Uncaught ReferenceError: $ is not defined
  </code></pre>
  
  <p>If I removed the async from the script tag there is no more error in my console and everything works fine.</p>
  
  <p>Do you have any idea why am having this problem ?</p>
  
  <p>EDIT</p>
  
  <p>Below script are placed inside the head tag</p>
  
  <pre><code>&lt;!-- JS --&gt;
  &lt;script async src="../js/jquery/jquery-1.10.1.min.js"&gt;    &lt;/script&gt;
  &lt;script async src="../js/vendor/modernizr-2.8.2.min.js"&gt;&lt;/script&gt;
  
  &lt;script async src="../js/asynchronous-resources/2014-06-03-asynchronous-resources.js"&gt;&lt;/script&gt;
  
  &lt;!-- IE JS --&gt;
  &lt;!--[if !IE]&gt;&lt;!--&gt;&lt;script async src="../js/ie10.js"&gt;&lt;/script&gt;&lt;!--&lt;![endif]--&gt;
  </code></pre>
  
  <p>main.js is added to the footer.</p>
  
  <pre><code>&lt;script async src="../js/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have found a similar question on stackoverflow. 
  <a href="https://stackoverflow.com/questions/14811471/load-jquery-asynchronously-before-other-scripts">Load jquery asynchronously before other scripts</a></p>
  
  <p>I had to change async to defer there is no more issue now in firefox, chrome and IE9.</p>
  
  <p>Byt it breaks in IE8 and IE7 completely. jQuery stopped working if I use defer.</p>