The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Load jQuery Only If Not Present

Last 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('', 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=""></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


  1. Eduardo Barros
    Permalink to comment#

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

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

  2. 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 ‘’ and before running our jQuery code.

  3. sarme

    i like to fondle myself while writing jquery.

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

  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>

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

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

  8. 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=””></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. Sharp Coders
    Permalink to comment#

    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:

    <script type=”text/javascript” > <src=”{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;


    <body onload=”jqload()”>
    <div id=”mypage”>
    </ 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.

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

    None of these work.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed