Head js Problems with loading javascript files

Question

I'm using Head js to load my javascript files in parallel. I added head js to my head and then used head.js("path/to/file/my.js"); but when I load my webpage the script is missing. Only after refreshing a few times does the whole script work properly. Why do I need to refresh it to make it work? Any suggestions would be appreciated!

Answer 1

As the scripts are loaded asynchronously, you can't use it immediately. After you have refreshed the page, it will find the script in the cache, so it will load in time for any code needing it sometimes .

Use the ready method for any code that needs the script:

head.ready(function() {
  // any code that needs the script to be loaded first
});

Answer 2

Another way is to mark your library and then get the ready event when your script is loaded. Read more from http://headjs.com/ Labeling scripts.

head.ready("your", function() {

});

head.js(
   {jquery: "http://http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"},
   {tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"},
   {your: "http://a.heavy.library/we/dont/want/to/wait/for.js"},

   // label is optional
   "http://can.be.mixed/with/unlabeled/files.js"
);