Load jQuery Only If Not Present

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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
				script.onload = script.onreadystatechange = null;
	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
			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

Hip kids don’t use document.write, but if you are too old to care:

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