Magento is not loading my scripts in an order i want

Question

I'm editing local.xml file to load some javascript, one of them is carosule.js and I want it only on my index page so I can use <cms_index_index> node but it is instantiated by init.js. How can I load them in an order I want?

  <cms_index_index>
        <reference name="head">
            <action method="addItem">
            <type>skin_js</type>
            <name>js/mycaro.js</name>
            </action>
        </reference>

    </cms_index_index>

     <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery.min.js</name>
            </action> 
            <action method="addItem">
                <type>skin_js</type>
                <name>js/init.js</name>
            </action>

        </reference>
    </default>

Currently it is loading in this order

<script type="text/javascript" src="http://localhost/m/skin/frontend/hs1st/default/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/m/skin/frontend/hs1st/default/js/init.js"></script>
<script type="text/javascript" src="http://localhost/m/skin/frontend/hs1st/default/js/mycaro.js"></script>

Answer 1

The loading of the plugin should not depend on the order of loading of the files. You need to trigger the loading of the plugin when the DOM has finished loading to be sure all the necessary files are loaded.

Let's say init.js contains something like this;

jQuery('#carousel').Carousel({option:optionvalue});

You'll want to wrap it in code to run when the DOM has finished loading, like this;

jQuery(window).ready(function () {
    jQuery('#carousel').Carousel({option:optionvalue});
});

See https://api.jquery.com/ready/