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

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
        });
    }
            
}
initJQuery();

Comments

  1. User Avatar
    Eduardo Barros
    Permalink to comment#


    !window.jQuery && document.write("");

    Does the trick for me.
    Any diffs in the final result?

  2. User Avatar
    Tomsy Web
    Permalink to comment#

    Great code but if we want to use a jquery plugin, where do you have to insert the javascript file of this plugin exactly and how ? – To make the plugin file call after ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’ and before running our jQuery code.

  3. User Avatar
    sarme

    i like to fondle myself while writing jquery.

  4. User Avatar
    Daniel J. Lewis
    Permalink to comment#

    I’m not a programmer, so I’m having some issues understanding and implementing this.

    Using the asynchronous way, what’s the deal with “fancyCode()”? It seems like you’re telling me to use .noConflict() everywhere, but in which way?

    This does seem to work on a page that already had jQuery running, but it fails with “fancyCode is not defined” on a page that doesn’t have jQuery. If I remove that line, then it says, “thisPageUsingOtherJSLibrary is not defined” referring to the line inside of getscript().

    Here’s the code I’m working on: http://noodle.mx/scripts/widgets.js

  5. User Avatar
    Ashish Shah
    Permalink to comment#

    Thank you for giving such a wonderful way to handle the loading jquery dynamically in to the page. Thanks a lot again.

  6. User Avatar
    Art
    Permalink to comment#

    If you’re writing a jQuery plugin and want to load jQuery in case the user forgot to, the document.write method is the way to go, as the asynchronous method won’t prevent a user’s own document.ready function from firing before the script loads.

    So, if you have the following situation:

    <script src="your-plugin.js"></script>
    <script>
        $(function(){
            $.useYourPlugin();
        });
    </script>

    You should use the document.write method in yourPlugin.js to make sure that jQuery loads before reaching the ready function.

    Hope this helps other developers, and if anyone discovers how to make the asynchronous method work with the above, please comment below.

    • User Avatar
      Art
      Permalink to comment#

      Slight typo between your-plugin.js and yourPlugin.js, but the logic still stands.

    • User Avatar
      Art
      Permalink to comment#

      Actually, both of these solutions fail to consistently load jQuery before a separate $(function(){ }); which may make this an unacceptable solution for the plugin solution I was looking for.

      Bummer. Back to the drawing board…

  7. User Avatar
    Rohit
    Permalink to comment#

    Thank you for this post ,
    i tried
    document.write method .
    Thanks for correcting me here
    “<scr" + "ipt

  8. User Avatar
    Mauricio
    Permalink to comment#

    There’s an issue with missing/double quotes on the document.write sample… Since I also like to use ” for attributes, I always use ‘ for quoting strings:

    document.write(‘<scr’ + ‘ipt type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></scr’ + ‘ipt>’);

    • User Avatar
      Ken

      This trick of breaking up the script tag no longer works in ie 11. There is security code that blocks it or a change in the js parser stopped this.

  9. User Avatar
    sBY
    Permalink to comment#

    if(thisPageUsingOtherJSLibrary) -> if(!thisPageUsingOtherJSLibrary) ?

  10. User Avatar
    Sharp Coders
    Permalink to comment#

    worked for me.. thanks

  11. User Avatar
    Tejas
    Permalink to comment#

    Thanks for giving valuable tips. It is working for me to add Jquery dynamically without duplicating.

    Keep it up. Thanks Again!!!

  12. User Avatar
    Logicxtreme
    Permalink to comment#

    You can easily use the following trick:

    <head>
    ….
    <script type=”text/javascript” > <src=”https://ajax.googleapis.com/ajax/libs/jquery/{version}/jquery.min.js”></script>

    <script type=”text/javascript”>
    function jqload()
    {
    if (typeof jQuery == “undefined”) {
    var script = document.createElement (“script”);
    script.type = “text / javascript”;
    script.src = “jquery.min.js”;
    document.getElementsByTagName (“head”) [0]. appendChild (script);
    script.onload = mypageload;
    script.onreadystatechange = function () {
    if (script.readyState == “loaded” | | script.readyState == “complete”) {
                     mypageload ();}}
    }
    }
    mypageload = function ()
    {
    htmlmypage = $ (“# mypage”). html ();
    $ (“# mypage”). empty ();
    $ (“# mypage”). html (htmlmypage);
    htmlmypage= undefined;
    }
    </script>

    </head>

    <body onload=”jqload()”>
    <div id=”mypage”>
    …..
    </div>
    </ body>

    all scripts in {div id = “mypage”} will initialize properly in this way after jquery is loaded

  13. User Avatar
    Kevin
    Permalink to comment#

    There was one error, I had to add the var at line 6, Example: var= thisPageUsingOtherJSLibrary

    • User Avatar
      Scott
      Permalink to comment#

      @Kevin: Same here! That’s definitely a typo. Thanks for the tip.

  14. User Avatar
    Tom
    Permalink to comment#
  15. User Avatar
    Casey
    Permalink to comment#

    None of these work.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag