best way to load scripts dynamically

Question

I'm working on a project where I've had to greatly widgetize my code. As such, I'm loading 5 pages of JS dynamically into the DOM. The problem I'm having though is that I don't have a way to check and wait for these scripts to be loaded. If it takes them a second to get pushed up into the DOM, then my script tries to run, but fails when it calls on them.

Here's an example of how I'm embedding my scripts.

var script_tag2 = document.createElement('script');
script_tag2.setAttribute("type","text/javascript");
script_tag2.setAttribute("src","http://www.freeptools.com/mapster/js/three.min.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag2);

This inserts it into the DOM, but I dont' have a way to pause my code until it's done. Has anyone run into this before? I'm trying to come up with a best practices for this, but coming up short.

jquery's getScript allows a callback to be called when the script is loaded (the idea behind I think is the onload event of the script dom element) — njzk2
– njzk2, Commented Feb 19, 2015 at 18:10
I'd suggest to take a look on require.js ( requirejs.org ) and approaches used by Twitter Flight Framework ( flightjs.github.io ) . — c-smile
– c-smile, Commented Feb 19, 2015 at 18:13

void · Accepted Answer · 2015-02-19 18:19:16Z

1

Use jQuery.getScript

jQuery.getScript("http://www.freeptools.com/mapster/js/three.min.js")
    .done(function() {
        /* yay, all good, do something */
    })
    .fail(function() {
        /* boo, fall back to something else */
});

answered Feb 19, 2015 at 18:19

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

best way to load scripts dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related