Does Labjs delay execution of loaded scripts until the DOM is ready?

Question

The question is about http://labjs.com - a huge library for non-blocking JavaScript and dependency loading controls.

I read the docs, but must have been too tired or something else - I could not find anything about the event ready for the DOM. Are scripts executed after the DOM is ready or not?

Maybe if I do this:

$LAB.script('my-library.js').wait(function(){ // interacting with DOM }); 

Would it be safe? Or should I use some kind of $(function() {}) etc.?

Answer 1

Any script loader by default acts to unlock script loading from DOM-ready and onload event pages, at least with intent / definition.

So the direct answer is: NO, LABjs will not block script execution until the DOM is ready. Some scripts loaded by LABjs may run before the DOM is ready, while others may run after the DOM-ready.

If you really have cases where your code needs to wait for the DOM, you should use a framework like jQuery and use its built-in DOM-ready shell $(document).ready(...) to make this logical DOM-ready-safe.

However, there are many cases where people think that they need to wait for DOM-ready when they do not:

• Most people combine DOM-ready with "all scripts load." If you just expect the DOM to be ready because you need to make sure all your scripts are loaded, this is an erroneous and incorrect assumption. Instead, use the script loader tool to determine when all scripts are loaded, and run them at the appropriate time regardless of the loading of the DOM. With LABjs, it is as simple as having all your scripts in the same $ LAB chain and the final .wait() at the end of the chain - you can be sure that your code in this .wait() will not run until all the scripts will be downloaded and launched.

• Most people think they need to wait until the DOM is ready to do things like binding event handlers or disabling Ajax requests. This is also a false assumption. If your code simply asks for a DOM for elements to attach event handlers or does nothing with the DOM at all, and instead makes Ajax calls, do not complete your logic in a DOM-ready wrapper.

• On the other hand, many believe that if your code runs at the end of the body tag, you do not need to wait for DOM-ready. Wrong. DOM-ready is ready for the DOM, no matter where your code is.

In general, the only time your code really needs to be wrapped in a DOM-ready wrapper is if it is going to change the DOM. Otherwise, do not wait for DOM-ready to run your code. Be careful what is wrapped and what is not.

Answer 2

How about using jQuery awesome Deferred object? This works like a charm:

 var waitThenLaunch = function() { var deferredDocReady = $.Deferred(); $(document).ready(function() { deferredDocReady.resolve(); }); var deferredScriptsReady = $.Deferred(); // Load your last remaining scripts and launch!!! $LAB.script('last.js').wait(function(){ deferredScriptsReady.resolve(); }); $.when(deferredDocReady, deferredScriptsReady).done(function() { launchApp(); }); }; $LAB.script('jquery.min.js') .script('another_script.js') .script('another_script.js').wait() .script('another_script.js') .script('another_script.js').wait(function(){ waitThenLaunch(); }); 

Find a great explanation here: http://www.erichynds.com/jquery/using-deferreds-in-jquery/