how to load jquery and its dependencies script asyncronously

Question

I am having an issue with loading jquery asynchronously. As I can see that if I load javascript that doesn't depend upon other library file work perfectly but loading jquery script and its library file with async doesn't work and throws an error saying $ is not defined

Below script lies in the head tag

<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>

Below main.js lies in the footer just above the closing of body tag.

<script async src="../js/main.js"></script>

Above script is throwing an error. how do I load jquery and its dependencies asynchronously.

Any help will be greatly appreciated.

Thanks in advance.

Answer 1

there are couple of options you can try

if you want to execute the script in the same order as specified in your html then defer is what you need.

async and defer scripts begin to download immediately without pausing the parser. The difference between async and defer centers around when the script is executed.

async script executes at the first opportunity after it is finished downloading and before the window’s load event.

defer scripts are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

since you are already using Modernizr, perhaps you can try Modernizr.load

or use require.js