Javascript module for loading scripts asynchronously.

loader.js

/**
 *    A module for loading scripts asynchronously in most browsers.
 *
 *    Note: this module uses the script.async attribute (see line 30), which 
 *    tells the browser to load the script asynchronously. Most modern browsers
 *    support this async functionality, but those that don't will simply 
 *    overlook it without causing problems. 
 *
 *    In addition, older versions of IE, Webkit, and Firefox 4+ that don't 
 *    support the async attribute will still load scripts asynchronously 
 *    if you use this module. The reason is this: if you use javascript to
 *    insert a script element into the DOM, those browsers will load it 
 *    asynchronously. Only Opera and pre-Firefox 4 don't do this. 
 *    
 *    @param {String}   file - The path of the file you want to load.
 *    @param {Function} callback (optional) - The function to call when 
 *                      the script loads.
 *
 *    @author JT Paasch [email protected]
 *    @version 1
 */
var loader = loader || (Function() {
    return {
    	
    	// This is the method that loads the script.
    	load: function(file, callback) {

	    // First, create a script element.
            var script = document.createElement('script');
            script.src = file, script.async = true;
            
            // If a callback is defined, we'll want to execute it after 
            // the script has loaded, so we need to check to see 
            // if the script has finished loading. 
            if (callback !== undefined) {
            	
            	// When IE loads a script, it calls script.onreadystatechange() 
            	// over and over again as the script loads. We can use 
            	// script.onreadystatechange() to find out when the script 
            	// has finished loading.
	        script.onreadystatechange = function() {
	                
	            // When the script finishes loading, IE sets 
	            // script.readyState to either 'loaded' or 'complete'.
	            if (script.readyState === 'loaded' ||
	                script.readyState === 'complete') {
	                    
	                // We don't need onreadystatechange() anymore, so
	                // let's set it to null to keep it from firing again.
	                script.onreadystatechange = null;
	                    
	                // Now we can execute the callback.
	                callback (file );
	            }
	        };
	            
	        // Other (non-IE) browsers call script.onload() when the 
	        // script has loaded, so we can execute the callback with that.
	        script.onload = function () {
	            callback ( file );
	        };
            }
            
            // Now that everything is ready, we can attach the script element 
            // to the DOM. Attaching it to the DOM causes it to start the 
            // loading process. We want to add the script element to the end 
            // of the document so that it won't block the rest of the page 
            // if the browser is old and can't load scripts asynchronously.
            document.body.appendChild(script);
        } 
    };
}());


/**
 *    MINIFIED VERSION: 
 */
var loader=loader||function(){return{load:function(c,b){var a=document.createElement("script");a.async=!0;a.setAttribute("src",c);a.onreadystatechange=function(){if("loaded"===a.readyState||"complete"===a.readyState)a.onreadystatechange=null,void 0!==b&&b(c)};a.onload=function(){void 0!==b&&b(c)};document.body.insertBefore(a,null)}}}();

 
/**
 *    EXAMPLE 1: 
 *    Loading a script.
 *    ----------------------------------------------
 * 
 *        // This will loads 'myscript.js'.
 *        loader.load('myscript.js'); 
 * 
 *
 *    EXAMPLE 2: 
 *    Loading a script then executing a function.
 *    ----------------------------------------------
 *  
 *        // First we define a function called ready().
 *        var ready = function() {
 *            console.log('Ready!');
 * 	  };
 *    
 *        // Next, we can tell the loader to load 'myscript.js' and 
 *        // then execute ready() after myscript.js has loaded:
 *        loader.load('myscript.js', ready);
 */