Execute my jQuery script after dynamically inserted jQuery library has finished loading

Question

I am dynamically inserting the jQuery library on a page via <script> tag:

jq = document.createElement('script');
jq.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
b.appendChild(jq);

Then I have some jQuery script that needs to run after the jQuery library has finished loading and is ready for use:

$(f).load(function() {
    $(f).fadein(1000);
});

How can I make it wait for jQuery to load?

Rob's answer below is perfect, though let me shimmy on here that what you're doing is (a good) part of what Modernizr was made for. :D — Richard Neil Ilagan, Jan 14 '12 at 19:25

score 14 · Answer 1 · answered Jan 14 '12 at 18:33

Specify an onload event at the to-be-inserted script tag:

function onLoad() {
    $(f).load(function() {
        $(f).fadein(1000);
    });
}

jq = document.createElement('script');
jq.onload = onLoad;   // <-- The magic
jq.src = '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
b.appendChild(jq);

An alternative way, if you cannot control the script insertion code, you can use a poller:

(function() {
    function onLoad() { ... } // Code to be run

    if ('jQuery' in window) onLoad();
    else {
        var t = setInterval(function() { // Run poller
            if ('jQuery' in window) {
                onLoad();
                clearInterval(t);        // Stop poller
            }
        }, 50);
    }
})();

Execute my jQuery script after dynamically inserted jQuery library has finished loading

1 Answers1

Linked