使用head.js以正确的顺序正确加载脚本和依赖项？

Question

I am not sure if I am utilizing head.js correctly. In the header of my html document I call the head.js file via:

<script src="/scripts/head.min.js" type="text/javascript"></script>

Then right before the closing < / body > tag in the html page, I call the following file:

<script src="/scripts/load.js" type="text/javascript"></script>

In the load.js file I have the following code:

head.js(

   {livechat: "/scripts/livechat.js"},
   {jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"},
   {jquerytools: "http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"},
   {slider: "/scripts/jquery.nivo.slider.pack.js"},
   {prettyphoto: "/scripts/jquery.prettyPhoto.js"},
   {sliderfunctions: "/scripts/slidercode.js"},
   {functions: "/scripts/functions.js"}

);

Does the above code cause the javascript files to execute in the same exact order they are listed or do they sometimes execute out of order?

I ask because the slider initially only functioned if I utilized the following code within load.js:

head.ready("slider", function() {
   $('#slider').nivoSlider({
      effect:'sliceDown',
      controlNav: false
   });
});

I was able to get around this by moving the above code to an external file called slidercode.js which contained the following code:

$(window).load(function() {
$('#slider').nivoSlider({
        effect:'sliceDown',
        controlNav: false
    });
});

But I am not sure if I am going about this the correct and most efficient way as this is my first time using head.js. Basically from the javascript files in loader.js I need to make sure:

1. jquery loads first.
2. Once jquery has fully loaded then jquerytools loads
3. After jquery is fully loaded, it should load slider first and then prettyphoto.
4. Then sliderfunctions should load as it is dependent on slider,
5. Lastly, functions should load as it is dependent on jquery and jquerytools.

Answer 1

You should call the scripts like this: (remove the http as well, it's not needed. Also Jquery always loads first of any scripts. in this case headJS has priority then jquery then all your scripts)

<script src="/scripts/head.min.js" type="text/javascript"></script>
// this loads asyncrounously & in parallel
head.load("//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js", "//cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js", "/scripts/jquery.nivo.slider.pack.js", "/scripts/jquery.prettyPhoto.js", "/scripts/slidercode.js", "/scripts/functions.js");

Then right before the closing < / body > tag in the html page, I call the following file:

<script>
head.ready(function () {
        // some callback stuff
        $('#slider').nivoSlider({
    effect:'sliceDown',
    controlNav: false
});
    });
<script>

Answer 2

Does the above code cause the javascript files to execute in the same exact order they are listed or do they sometimes execute out of order?

Yea, they load asyn, but execute in order.

I think head.ready("slider", function() {} ); should also work even if you place it outside of load.js . Try adding it after load.js script block.