jQuery loads slower than the other script which sould use it

I would like to know, how to run something after the jQuery load? Does the jQuery got an 'I'm ready' event?

first in my getls.js

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/setls.js';
document.getElementsByTagName('body')[0].appendChild(script);

and then in the setls.js

if (typeof jQuery == 'undefined') {  
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
    document.getElementsByTagName('body')[0].appendChild(script);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/ls.js';
document.getElementsByTagName('body')[0].appendChild(script);

ls.js

$("body").css("background-color", "green");

But the ls.js loads faster than jquery and tells me Uncaught ReferenceError: $ is not defined. How can i handle this event? Thanks for the help.

Edit: This is because this script will be something like the google analytics, you know. To let the user use just one line开发者_Go百科 of script and load getls.js in his code, will makes him happy (Oh cool, its just 4 lines? Needy). But i also have to check jQuery because i will use jQuery later, and if already got it, I can't load it again. After this I would like to use it.

So it's not about document.ready event, the document was ready before I started to load the jQuery.

You want to load both scripts dynamically. You have two options :

1. Use onload on the script you are injecting. It is supported on all major browsers, but test it on IE as it was not working a couple of years ago on IE. This is a clean solution.
2. Poll, using a timer, for the existence of the jQuery variable, using typeof(window.jQuery) . When it is defined, jQuery should be loaded.

Instead of a race condition, just have JQuery load your ls.js using $.getScript()

$.getScript('http://example.com/ls.js', function(data, textStatus){
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log('Load was performed.');
});

http://api.jquery.com/jQuery.getScript/

Check in a loop until jQuery will be available:

//Have to wait until jQuery will arrive
function wait_for_jQuery(){
    if (typeof jQuery == 'undefined'){
        setTimeout(wait_for_jQuery, 50);
    }else{
        $(document).ready(main()); 
    }
}
wait_for_jQuery();

function main(){ ... };

Wrap your code into this:

$(document).ready(function(){

//your code

}

This waits for the DOM and all the script and css files to be loaded. And make sure, that the - tag for jquery is added before your javascript-file.

jQuery sort of has an "I'm ready" event. What you want to do is wrap your code in:

$(document).ready(function() {
    // Your code here
});

This will delay the execution of the code inside the document ready until the DOM and jQuery are fully loaded. Also, placing all your script tags at the bottom of the page is good practice for efficiency.