Script for dynamic JavaScript and CSS loading

With the following script, you can easily load javascripts and css files dynamically and asynchronously of course:

/**javascript and css loader
 * @author: sgurin
 */
(function(){
 
var _loadF = function(name, type, listener){
 var el=null;
 if (type=="js"){ 
  el=document.createElement("script");
  el.setAttribute("type","text/javascript");
  if(listener) {
   el.onreadystatechange = function () {
    if (this.readyState == 'complete') listener();
   };
   el.onload=listener;
  }
  el.setAttribute("src", name);
 }
 else if (type=="css"){ 
  el=document.createElement("link");  
  el.setAttribute("rel", "stylesheet");
  el.setAttribute("type", "text/css");
  el.setAttribute("href", name);
 }
 document.body.appendChild(el);
};
/**public global function
 * @param css - array of css url to load. can be null
 * @param js - array of javascript scripts urls to load. can be null
 * @param listener function that will be called when ALL js and css files are loaded.
 */
LOADFILE = function (css, js, listener) { 
 css=css==null?[]:css;
 js=js==null?[]:js;
 var subListener=function(){
  LOADFILE.counter--;
  if(LOADFILE.counter==0)
   listener();
 };
 for(var i=0; i<css.length; i++) {
  _loadF(css[i], "css", subListener);
 }
 for(var i=0; i<js.length; i++) {
  LOADFILE.counter++;
  _loadF(js[i], "js", subListener);
 }
};
LOADFILE.counter=0;//file load counter

})();

For example, you can dynamically load all your javascript application's javascript and css files like this:

LOADFILE(
 ["http://yui.yahooapis.com/2.8.1/build/slider/assets/skins/sam/slider.css", 
  "http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css", 
  "http://yui.yahooapis.com/2.8.1/build/colorpicker/assets/skins/sam/colorpicker.css"], 

 ["http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js",
 "http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js",
 "http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js",
 "http://yui.yahooapis.com/2.8.1/build/slider/slider-min.js",
 "http://yui.yahooapis.com/2.8.1/build/element/element-min.js",
 "http://yui.yahooapis.com/2.8.1/build/colorpicker/colorpicker-min.js"], 
 
 function(){
    //my javascript application's code
    var Event = YAHOO.util.Event,
        picker;
    Event.onDOMReady(function() {
  YAHOO.log("Creating Color Picker.", "info", "example");
           picker = new YAHOO.widget.ColorPicker("container", {
                   showhsvcontrols: true,
                   showhexcontrols: true,
    images: {
     PICKER_THUMB: "assets/picker_thumb.png",
     HUE_THUMB: "assets/hue_thumb.png"
       }
               });
  YAHOO.log("Finished creating Color Picker.", "info", "example");
  var onRgbChange = function(o) {
   YAHOO.log("The new color value is " + o.newValue, "info", "example");
  }
  picker.on("rgbChange", onRgbChange);
  Event.on("reset", "click", function(e) {
   picker.setValue([255, 255, 255], false); 
  });  
  Event.on("gethex", "click", function(e) {
   alert("Current hex value: " + picker.get("hex"), "info", "example"); 
  });
     });  
});

Hope this help somebody