4

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.

Shomrat Shomrat
  • 55
  • 1
  • 6

4 Answers4

7

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
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";
Engineer
  • 47,849
  • 12
  • 88
  • 91
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.
});
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
-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.

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