How to know if JQuery has finished loading

Question

For some case say I need to load jQuery using a piece of javascript like this :

 <script type="text/javascript">
    if (typeof jQuery == 'undefined') 
    {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    }
 </script>

But how will I know that JQuery has finished loading so that I can use it.

jfriend00 · Answer 1 · 2014-07-30T17:16:09.123

You will have to write code to detect when a dynamically loaded script is loaded and unfortunately, it works slightly different in some older browsers so it isn't as simple as it could be. Here's a good reference article on how to do that: http://www.ejeliot.com/blog/109

Here's some of the code from that article:

function loadScript(sScriptSrc, oCallback) {

    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');

    // make sure callback isn't run more than once
    function runCallback() {
        if (oCallback) {
            oCallback();
            oScript.onload = oScript.onreadystatechange = null;
            oCallback = null;
        }
    }

    oScript.type = 'text/javascript';
    // most browsers
    oScript.onload = runCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState === 'complete') {
            runCallback();
        }
    }
    oScript.src = sScriptSrc;
    oHead.appendChild(oScript);
}

Alternatively, you could use one of the tiny libraries that does this work for you. You can see a list of some of those here: http://microjs.com/#loader. Though I'm not sure you want to use yet another library to assist with loading your primary library.

He can also try using one of the ready-made lazy loaders over here: http://microjs.com/#loader. — Tim Dumol, Jun 22 '12 at 17:16
Thanks. I was looking for the solution you mentioned above (first link). — Shomrat Shomrat, Jun 22 '12 at 17:20

score 2 · Answer 2 · answered Jun 22 '12 at 17:15

2

Try onload event:

 //.....
 script.onload = function(){
     alert('jQuery is loaded succesfully').
 };
 script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";

answered Jun 22 '12 at 17:15

Engineer

47,849
12
88
91

2

This works in some browsers, but not in older versions of IE. – jfriend00 Jun 22 '12 at 17:16

Jon Jaques · Answer 3 · 2012-06-28T02:38:12.430

0

Kudos for jfriend's answer. Callbacks are sexy.

Second crack at it.

function loadJQ(callback) {
  if(!window.jQuery) {
    // Create jQuery script element.
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'path/to/jquery.js';
    document.body.appendChild(script);

    script.onload = function(){ callback(jQuery); };
    // IE 6 & 7 ala jfriend00
    script.onreadystatechange = function() {
      if (this.readyState == 'complete') callback(jQuery);
    }
  } else {
    callback(jQuery);
  }
}

Invocation

loadJQ(function($){
  alert($ === jQuery); // true. jquery is loaded.
});

edited Jun 28 '12 at 02:38

answered Jun 22 '12 at 17:18

Jon Jaques

4,262
2
23
25

hah, of course I was too late, Engineer beat me too it. script.onload is the key – Jon Jaques Jun 22 '12 at 17:20
script.onload doesn't work in some older version of IE. – jfriend00 Jun 22 '12 at 17:20
bah.. good call. *updates my snippets* – Jon Jaques Jun 22 '12 at 17:28
Why do you reload jQuery in a loop? Your code essentially does this. If jQuery not loaded, load jQuery. If onload fires and jQuery not loaded, load jQuery again, repeat over and over again. – jfriend00 Jun 22 '12 at 17:32
I grabbed this out of one of my bookmarklet snippets. Really only useful if jQuery is already on the page. I should probably patch it to not try to create the script more than once. – Jon Jaques Jun 28 '12 at 02:22

madc · Answer 4 · 2012-06-22T18:44:55.793

-4

You can put code in

$(document).ready(function() {
   // Handler for .ready() called.
});

Here are the Docs: http://api.jquery.com/ready/

Edit: Guess i got the Question wrong. So i cant answer how to see it its loaded, but can provide another approach to load the lib.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write("\x3Cscript src=\"path/to/js/jquery-1.7.1.min.js') }}\">\x3C/script>")</script>

Here, a local version of jQuery gets loaded, if the google api is not available. Than the snipped above should be secure enough know that jQuery is loaded.

edited Jun 22 '12 at 18:44

answered Jun 22 '12 at 17:11

madc

1,674
2
26
41

3

You can't use `document.ready()` if jQuery isn't loaded yet. This will not help with the OP's question which is about dynamically loaded jQuery. – jfriend00 Jun 22 '12 at 17:16

How to know if JQuery has finished loading

4 Answers4

Linked

Related