Head.ready () vs $ (document) .ready

Question

The head.js library was recently discovered, and I'm happy with it, although I'm still a bit confused about one thing.

From headjs.com:

A DOM ready event, such as $ (document) .ready (), is already fired when scripts arrive. If the loaded scripts depend on this event, make sure your library can handle it. JQuery 1.4+ works.

With that in mind, what is the best way to customize a page using jQuery if the code inside $ (document) .ready () depends on external scripts loaded with head.js?

Is it possible to simply lose the call to $ (document) .ready () together and still successfully configure things like event listeners that rely on a document ready? Example:

head.js("script1.js", "script2.js", "script3.js", function() { $('#button').click(function(event) { alert("clicked"); }); }); 

Or do we want to wrap $ (document) .ready () inside a function?

Just wondering what the best practice is for everything to be ready by the time it should be.

Answer 1

In any case, this is normal. Handlers passed to ready () are called immediately if the DOM is already fully initialized.

With a slight performance boost, you can remove the ready handler and include your code directly, unless you rely on a side effect, such as jQuery $ , which is passed to the handler.