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.

• Bharath: Asynchronously they all load at the same time. So jquery dependcy js will start to load before jquery.js is loaded. Hence you are facing that problem. Make jquery to load synchronously then load the remaining async.
• Santosh: Yes I just figure out that. Is there a solution I can fixed the issue but still load them asynchronously. I want jquery to be loaded first and then only its dependencies. How do I make it work ?

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

• Santosh: lovely.. modernizr.load seems to be perfect.. Thanks :)