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