jquery - How can I force JavaScript to wait until after a dynamically added script file has completed loading? - Stack Overflow

admin管理员组

文章数量:1387358

I'm trying to write a function which will append a javascript file to the DOM, but I am looking to have the rest of the code wait until the newly added JS file is pletely loaded. Here is an example of what I am trying to acplish, although this code doesn't work properly:

$(document).ready(function () {
    var newScript = document.createElement("script");
    newScript.setAttribute("type", "text/javascript");
    newScript.src = ".js";
    document.getElementsByTagName("body")[0].appendChild(newScript);
    $(newScript).ready(function () { // This is the idea of what I'm trying to do, but this doesn't seem to actually wait until the new file is pletely loaded.
        foo.bar(); // foo is a new global variable which is declared in the newScript. This causes an error "foo is not defined".
        // Here is where more code I wish to execute should continue.
    });
});

I'm trying to write a function which will append a javascript file to the DOM, but I am looking to have the rest of the code wait until the newly added JS file is pletely loaded. Here is an example of what I am trying to acplish, although this code doesn't work properly:

$(document).ready(function () {
    var newScript = document.createElement("script");
    newScript.setAttribute("type", "text/javascript");
    newScript.src = "http://www.domain./script.js";
    document.getElementsByTagName("body")[0].appendChild(newScript);
    $(newScript).ready(function () { // This is the idea of what I'm trying to do, but this doesn't seem to actually wait until the new file is pletely loaded.
        foo.bar(); // foo is a new global variable which is declared in the newScript. This causes an error "foo is not defined".
        // Here is where more code I wish to execute should continue.
    });
});

• javascript
• jquery

Share Improve this question Follow asked Jul 16, 2012 at 21:35 BenRBenR 2,93633 gold badges2828 silver badges3939 bronze badges 2

• 4 api.jquery./jQuery.getScript – Musa Commented Jul 16, 2012 at 21:37
• @Musa, make this an answer... – Greg Commented Jul 16, 2012 at 21:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

As Musa mentioned in the ments above. Use jQuery's getScript and use the success callback function to trigger your other functions.

If you want more robust module loading functionality, then require.js works great in this capacity. Check out: http://requirejs/docs/why.html for an overview. I use require.js specifically for lazy-loading script modules.

Using jQuery (as you've tagged), it's extremely easy:

$.getScript('/script.js', function() {
    foo.bar();
});

There's a few different ways to do this... via libraries or "by hand," so to speak, using only the browser APIs and straight JavaScript. For an answer on how to do this in JS only, look here for Stoyan's post to give you guidance. Basically, the gist of it is setting an event handler to both the script's unload and onreadystatechange properties and then check to see if the readyState is "loaded" or "plete" (if it exists at all). It would look something like this:

var done = false;
newScript.onload = newScript.onreadystatechange = function () {
    if (!done && (!newScript.readyState || newScript.readyState === "loaded" || newScript.readyState === "plete)) {
        done = true;
        // run your actual code here
    }
};

本文标签：