Loading And Executing jQuery In Javascript File

Question

My question is similar to this one . But I feel the answers there are incomplete and the question ended with a not of uncertainty...

I am developing a Javascript application for my users to put on their site. I only want them to have to put ONE javascript include at the top of their webpage in order to use my application.

My javascript needs jQuery to run.

So the goal is to...

1. Check if jQuery is already loaded.
2. Load jQuery if it has not been loaded.
3. Execute javascript that needs jQuery to run.

I want to do the above three all within the same script.

Here is what I tried originally...

function loa_j(){
 if (typeof jQuery === "undefined") {
 var newscript = document.createElement('script');
 newscript.type = 'text/javascript';
 newscript.async = true;
 newscript.src = 'http://code.jquery.com/jquery-latest.min.js';
 (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
 }
}

loa_j();
$(document).ready(function(){
//...Code That Never Fired
}

This does not work because javascript does not wait for jQuery to load. It does load the jQuery, just not fast enough.

Here is my other solution, this one worked, but I am scratching my head wondering whether or not this is really the best way to do this...

function loa_j(){
if (typeof jQuery === "undefined") {
(function(a,b){function G(a){var b=F[a]={.... //Entire jQuery copy and pasted in :D
}
}

So by copying and pasting the entire jQuery into that function, the code actually does work.

Is this really the best way to do this?

Answer 1

you can add onload event to the dynamically loaded script as follows:

function loa_j(){
 if (typeof jQuery === "undefined") {
     var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'http://code.jquery.com/jquery-latest.min.js';
     newscript.onload = jqReady;  //<-- executed only after jquery is loaded
     (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body'[0]).appendChild(newscript);
  }
}

function jqReady(){
    // your jquery code here 
}

loa_j();

Answer 2

Edit like this

$(document).ready(function(){
loa_j();
//...Code That Never Fired
}

Answer 3

In this instance, you have to use a timer to check for the existence of the library, then execute your code. See this fiddle:

http://jsfiddle.net/pFaJc/

var callback = function(){
    $(document).ready(function(){
         console.log('jquery');
    });        
}

if( typeof jQuery === 'undefined' ){
    var scr = document.createElement('script');
    scr.src = 'http://code.jquery.com/jquery-latest.min.js';
    document.getElementsByTagName('head')[0].appendChild(scr);

    var timer = setInterval(function(){
        if( typeof jQuery !== 'undefined' ){
            clearInterval(timer);
            callback();
        }        
    },100);
}​

Answer 4

You can try this, it basically waits for the jquery to load, then executes the function. Its also a good Idea to probably load Jquery statically, if you can, since it seems that you do rely on the $(document).ready function. But if thats not possible, you can try this, or any other loaders out there like yepnope.js or my favorite requirejs.

http://jsfiddle.net/ytZRw/