LAB.js is an asynchronous JavaScript loader that loads and executes remote scripts in an extremely efficient, non-blocking manner. With that efficiency, however, comes the complexity of working outside the "normal" top-down page flow of the document. This means that the DOM-Ready event provided by jQuery has to be integrated in to the LAB.js load/wait event life-cycle
When you use LAB.js to load your remote JavaScript files, the DOM-ready event is likely to fire a lot faster than normal. This is because the asynchronous loading of the remote JavaScript files no longer delays the DOM events. However, just because the DOM is ready sooner than normal doesn't mean you can just execute JavaScript code at the bottom of your page (as you would in a traditional "blocking" approach). Since the remote JavaScript files are loading asynchronously to the page itself, you now have to ensure that both the scripts and the DOM are ready to be used before you try to manipulate any markup.
Since the JavaScript files are being loaded asynchronously, I like to initiate their loading in the HEAD of the page. This way, LAB.js can immediately start loading them in parallel with the rest of the DOM. As with the traditional model, I then like to put my "init" scripts at the bottom of the page. In order to make sure the init scripts fire after both the DOM-ready event and the script loading, I need to put my init scripts in the wait() callback of the asynchronous script loader. In order to do so, I have to keep a reference to the "chainable queue" responsible for loading my JavaScript files.
https://github.com/getify/LABjs
http://www.bennadel.com/blog/2230-using-the-lab-js-script-loader-with-jquery-s-dom-ready-event.htm
Comments
Post a Comment