Load jQuery Only If Not Present

Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don't want to load it again, but if not, you do. This works for that.

Smart Asynchronous Way

// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {

 if (typeof $ == 'function') {
  // warning, global var
  thisPageUsingOtherJSLibrary = true;
 }
 
 function getScript(url, success) {
 
  var script     = document.createElement('script');
       script.src = url;
  
  var head = document.getElementsByTagName('head')[0],
  done = false;
  
  // Attach handlers for all browsers
  script.onload = script.onreadystatechange = function() {
  
   if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
   
   done = true;
    
    // callback function provided as param
    success();
    
    script.onload = script.onreadystatechange = null;
    head.removeChild(script);
    
   };
  
  };
  
  head.appendChild(script);
 
 };
 
 getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
 
  if (typeof jQuery=='undefined') {
  
   // Super failsafe - still somehow failed...
  
  } else {
  
   // jQuery loaded! Make sure to use .noConflict just in case
   fancyCode();
   
   if (thisPageUsingOtherJSLibrary) {

    // Run your jQuery Code

   } else {

    // Use .noConflict(), then run your jQuery Code

   }
  
  }
 
 });
 
} else { // jQuery was already loaded
 
 // Run your jQuery Code

};

Notice how there is multiple places the jQuery code you intend to run get's called. Don't repeat yourself there, put it in a function you can call to kick things off.

This code was adapted from here.




Document.write way
var jQueryScriptOutputted = false;
function initJQuery() {
    
    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {
    
        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;
            
            //output the script (load it from google api)
            document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    } else {
                        
        $(function() {  
            // do anything that needs to be done on document.ready
            // don't really need this dom ready thing if used in footer
        });
    }
            
}
initJQuery();