Script injection with Deferred/Promises (non-jQuery)

ScriptInjection.js

/**
 * Module that implements non-jQuery script injection with Deferred/Promise support (using
 * Q.js ).
 * 
 * This deferred load notifies caller when the script is loaded... so chaining
 * or post load actions is easily supported.
 *
 */
( function( win, doc, $q ){
  "use strict";

  /**
   * Load external script and return a promise
   * to be resolved when script is loaded
   */
  win.getScript = function( url ) {

    var head     = document.documentElement,
      $script      = null,
      dfd          = $q.defer(),
      injectScript = function (url, resultHandler, failHandler) {
        var s = doc.createElement('script');
          s.type  = 'text/javascript';
          s.src  = url;
          s.async = true;

          s.onreadystatechange = s.onload = function() {
            var state = s.readyState;

            if( !state || /loaded|complete/.test(state) ) {
              resultHandler();
            } else {
              failHandler();
            }
          };

        // use body if available. more safe in IE
        (doc.body || head).appendChild(s);

        return s;
      },
      removeScript = function() {
        $script.onload = $script.onreadystatechange = null;

        // Remove the script
        if ( $script.parentNode ) {
          $script.parentNode.removeChild( $script );
        }
      },
      onLoadOK = function() {
        dfd.resolve();
        // Remove script tag since the JS has been loaded and evaluated...
        removeScript();
      },
      onLoadFail = function() {
        dfd.reject();
        removeScript();
      };

        // Create and inject script tag at end of DOM body and load the external script
        // attach event listeners that will trigger the Deferred.

        $script = injectScript( url, onLoadOK, onLoadFail );

      // Publish `promise` to respond later...
      return dfd.promise;
      

  };

  // Example of sequential loading of two (2) external javascript libraries: Underscore and D3
  var script1 = 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js';
  var script2 = 'http://d3js.org/d3.v3.min.js';

  win.getScript( script1 )
     .then( function() {
        console.log("Underscore library (1.4.4) loaded....");
        return win.getScript( script2 );
     })
     .then( function() {
        console.log("D3 library (v3) loaded....");
     });

// Requires Q.js (or equivalent) to be loaded; for Deferreds/Promises

}( window, document, Q ));
  

ScriptInjection_withJQuery.js

/**
 * Module that defers loading of external script until page/jQuery is ready.
 *
 * This sample uses jQuery to load/inject the script... and supports chaining
 * or post load actions.
 *
 */

// When the page/DOM is ready... (or any time)
// Callback handler to be invoked when the page/DOM is ready
$( function() {
  // Example of sequential loading of two (2) external javascript libraries: Underscore and D3
    
  var script1 = 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js';
  var script2 = 'http://d3js.org/d3.v3.min.js';
  

  $.getScript( script1 )
   .done( function(script, textStatus){
      console.log("Underscore library (1.4.4) loaded....");
      
      return $.getScript( sript2 )
              .done( function() {
                console.log("D3 library (v3) loaded....");  
              });
   })
   .fail( function() {
      console.log("FAILED to load Underscore library (1.4.4)....");
   });

});