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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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