How to use head.js to load jQuery correctly?

855 Views Asked by At

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:

  1. Am I doing correctly?

  2. 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)?

0

There are 0 best solutions below