Check if jQuery has loaded with Javascript

Question

I am adding jQuery in dynamically due to the requirements of my project. However, when the below function is called jQuery is not defined is displayed in the console. However, if I write alert(jQuery) in the console it returns function (a,b){return new m.fn.init(a,b)}, so I know that it is loaded. Does anyone have any suggestions?

function AddExternals(){
  if (!jQuery){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
    console.log("Added jQuery!");
  } else {
    console.log("jQuery already exists.")
  }
}

How is `AddExternals()` is called? Remember, you're checking for `jQuery` after the DOM has completely loaded. — Adam Azad, Dec 21 '15 at 10:56
I am checking using `document.addEventListener("DOMContentLoaded", AddExternals)` — Mike Resoli, Dec 21 '15 at 10:58
How is the console displaying `jQuery is not defined`? you must be calling something else which relies on it as your `console.log()` in the code you shared doesn't say that anywhere - I'm guessing you're calling something after this? — StudioTime, Dec 21 '15 at 11:04
... That's the error I receive in the console... I am calling nothing else anywhere at that point in time. It's triggered by `if (!jQuery){`. — Mike Resoli, Dec 21 '15 at 11:07
You can check https://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/ — Bhavik Jani, Dec 21 '15 at 11:46

score 1 · Answer 1 · answered Dec 21 '15 at 11:19

If you need to load in certain moment(not right after page load), make some function like this.

It checks script load binding event.

function loadFile(url, callback) {
    var d = document.head || document.getElementsByTagName("head")[0];
    var s = document.createElement("script");

    s.type = "text/javascript";
    s.src = url;
    s.charset = "utf-8";
    d.appendChild(s);

    if(callback) {
        if(s.addEventListener) {
            s.onload = callback;
        } else if(s.readyState) {
            s.onreadystatechange = function() {
                s.readyState === "loaded" && callback();
            };
        }
    }
}

// load JS file dynamically.
loadFile("https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js", function() {
  // it will call right after file has been loaded
  alert(jQuery.fn.jquery);
});

score 1 · Accepted Answer · edited Dec 21 '15 at 12:26

You can use window.jQuery to validate if jQuery has been loaded or not

function AddExternals(){
  if (!window.jQuery){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
    console.log("Added jQuery!");
  } else {
    console.log("jQuery already exists.")
  }
}

AddExternals();

WORKING DEMO

Note: According to js convention pascal case is used when it is a constructor function .For example

var adder = new Function('a', 'b', 'return a + b');

score 0 · Answer 3 · answered Dec 21 '15 at 10:56

0

You can check this way, instead of using (!jQuery):

if (typeof jQuery == "undefined") {

answered Dec 21 '15 at 10:56

Praveen Kumar Purushothaman

164,888
24
203
252

1

Even if jQuery has been loaded it still runs as if it is not. – Mike Resoli Dec 21 '15 at 10:59

score 0 · Answer 4 · edited May 23 '17 at 11:44

0

From here

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

So, move move your function to window.onload event

window.onload = function() { 
   AddExternals() 
};

And go with Praveen's advice.

edited May 23 '17 at 11:44

Community

1
1

answered Dec 21 '15 at 11:02

Adam Azad

11,171
5
29
70

score 0 · Answer 5 · answered Dec 21 '15 at 11:15

I feel you have to use a timer to check after appending a script:

function AddExternals(){

  var timer;

  if (!jQuery){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
    console.log("Added jQuery!");
  }else{
    console.log("jQuery already exists.")
  }

  timer = setInterval(checkIfjqLoaded, 1000);

  function checkIfjqLoaded(){
     if(timer){
       clearInterval(timer);
       AddExternals();
     }
  }

}

Check if jQuery has loaded with Javascript

5 Answers5