As my website needs to load a number of scripts (including jQuery), so I decided to use head.js for this purpose. Originally, I have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
where script.js is my own script. In scripts.js, I was having some code using document ready event like this:
$(function() {
//...
});
When switching to head.js, I am using this to load the scripts:
<script type="text/javascript" src="head.load.min-1.0.3.js"></script>
<script type="text/javascript">
head.load([{jQ: "http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"},
{jQHK: "http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"},
{BS: "bootstrap/js/bootstrap.min.js"},
{Mine: "scripts.js"}]);
</script>
And in scripts.js, I am using:
head.ready("jQ", function() {
//...
});
My questions are:
Am I doing correctly?
Can I assume that DOM is always ready when head.ready("jQ",...) is fired (I have experience with my website that sometimes it seems not)?