I'm downloading JQuery asynchronously:

function addScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('jquery.js');

// non-jquery code ...

// jquery specific code like: $()...

As such - how do I call my JQuery specific code once JQuery is loaded (because since I'm downloading my JavaScript asynch - it's not blocking, which is good, but is trying to execute my JQuery specific code before JQuery has been loaded).

I'm downloading JQuery asynchronously:

function addScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('jquery.js');

// non-jquery code ...

// jquery specific code like: $()...

As such - how do I call my JQuery specific code once JQuery is loaded (because since I'm downloading my JavaScript asynch - it's not blocking, which is good, but is trying to execute my JQuery specific code before JQuery has been loaded).

• javascript
• jquery
• callback

• 1 Just out of curiosity, why are you loading scripts asynchronously? – dclowd9901 Commented May 11, 2010 at 19:07
• Because I don't want them to block while downloading and responsiveness is super important. – Teddyk Commented May 11, 2010 at 19:08
• Block what, exactly? The page load? If that's your concern, just put the code instantiation at the bottom of the page, right before the </body> tag... – dclowd9901 Commented May 11, 2010 at 19:15
• 1 @dclowd9901 In some cases, it is not necessary to load ever script at page load time. – Justin Johnson Commented May 11, 2010 at 19:41
• 1 @dclowd9901 Excellent - came across this searching for a current problem, just thought I'd contribute for others who find it. – Chris Moschini Commented Aug 17, 2012 at 18:35

4 Answers 4

You can host a copy of the jquery file yourself. Then you can add a call to the callback function at the bottom of jquery.js:

/* jquery code goes here ... */

my_onload_callback();

For me this works (tested in FireFox 33.0.3):

    if(typeof(jQuery) == "undefined"){

        //create onload-callback function
        window["__9384nalksdfalkj04320"] = function(){
            console.log("jQuery=" + jQuery);
        };

        //load jQuery asynchronously
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("onload", "__9384nalksdfalkj04320();"); //register onload-callback listener function
        script.setAttribute("src", "http://code.jquery./jquery-latest.min.js");
        document.head.appendChild(script);
    }

You can inline LabJs into your page (potentially, every page). On the downside, you're inlining a script over and over. On the upside, LabJs is pretty small - 4k minified - and it lets you handle plex asynchrony load patterns cross-browser with very simple code like:

<script>
// Minified LabJs goes here
</script>
<script>
function init() {
    // Your code after jquery loads goes here
}

$LAB
.script('//ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js')
.wait(init);
</script>
</body>

I'm not much on standard Javascript, but you may try doing something like this:

var script_object = new addScript('jquery.js');

script_object.onLoad('addScript("my_jquery_related.js")');

Admittedly, that's a mega shot in the dark.

If that doesn't work, maybe pass through your function as a callback variable in your JS loader:

addScript(url, function(){ function_to_call();})

function addScript(url, call_back_function) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);

    call_back_function.call;
}
addScript('jquery.js');

That's all I got :\