Grow your CSS skills. Land your dream job.

Last updated on:

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. Eduardo Barros
    Permalink to comment#


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

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

  2. 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. sarme

    i like to fondle myself while writing jquery.

  4. 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. 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. 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.

    • Art
      Permalink to comment#

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

    • 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. Permalink to comment#

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

  8. 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>’);

    • 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. sBY
    Permalink to comment#

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

  10. worked for me.. thanks

  11. 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. 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. Kevin
    Permalink to comment#

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

    • Scott
      Permalink to comment#

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".