Loading YUI: Seeds, Core, and Combo-handling » Yahoo! User Interface Blog

Loading YUI: Seeds, Core, and Combo-handling » Yahoo! User Interface Blog



2. Using YUI Loader Plus Core as a Seed File
1. Using YUI Loader as a Seed File
* You have access to Event Utility’s event listener methods and its crucial page-timing methods (like onDOMReady and onContentReady) right away;
* You have access to the Dom Collection’s swiss-army knife of DOM convenience methods right away.

<script type="text/javascript" 
src="http://yui.yahooapis.com/combo?2.6.0/build/yuiloader-dom-event/yuiloader-dom-event.js"></script> 
<script>
(function() {
 //create Loader instance:
    var loader = new YAHOO.util.YUILoader({
        require: ["tabview"],
        onSuccess: function() {
         //when TabView is loaded, instantiate Tabs:
         var tabView = new YAHOO.widget.TabView('demo');
        },
        combine: true
    });
    
    //When our target element is ready, bring
    //in the non-blocking, combo-handled script
    //download.  We can use Event here because
    //we've loaded YUI Core at the top of the page:
    YAHOO.util.Event.onContentReady("demo", function() {
     loader.insert();
    });

})();

3. Combining All Requests in a Single FileBest practice according to Yahoo’s

Exceptional Performance guidelines would be to put this single file as close to the bottom of the page as possible, allowing the content and design to be processed before the browser hits your JS files. (Note: this is one reason why you might find approaches 1 and 2 useful — putting the 17.4KB YUI Loader + YUI Core file at the top of your file has minimal performance impact, and it allows you to load other JavaScript-dependent modules onDOMReady where appropriate.)