How to check if jQuery is loaded and include it programatically if not

• Tweet

• Tweet

Hello,

There are many a times when you want to do this but if you are a plugin or jQuery widget developer then this becomes much more important.

It becomes important because your widget or plugin may not work if jQuery is not present. right?

Ok so lets check it out

To check if jQuery is present or not then you can choose any one of these methods

First method

if(typeof jQuery == 'undefined') {
   // jQuery is not present
} 
else {
  // jQuery is loaded
}

Second Method

This is a bit more comprehensive and check if jQuery is not present to jQuery has preoperly loaded yet

if (typeof jQuery == 'undefined' || typeof jQuery  != 'function' || jQuery("*") === null) {
    // jQuery is not read yet or its still loading. Defer your stuff for some time and check again
} 
else {
   // all good
}

Alrigth so now we know how to check if jQuery is loaded or not now we want to include it if its not there at all this is how I do it normally.

Including jQuery programatically

I will just copy the first method here and put the jQuery inclusion code in the first if

if(typeof jQuery == 'undefined') {
        // jQuery is not present, lets include it
 var header = document.getElementsByTagName("head"); 
 // you may want to check if head is present or not but for all modern browser it will be
        var jqscript = document.createElement("script");
        jqscript.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
        header[0].appendChild(jqscript);
 // this can take upto few seconds so you may want to 
 // defer your code from executing few seconds and possible checking 
 // with second method if jQuery is now available
} 
else {
  // jQuery is loaded
}

Ok so this is how I would approach this problem. If you think of something that can be done to improve this please share it using site comments.

I hope that this helps you in one way or another.

Cheers

Advertisement