How can I delay the execution of a script block until after an external script has loaded?

Question

I'm trying to dynamically insert and execute a couple of scripts, and I think I'm hitting a race condition where the second is trying to execute before the first is loaded.

The project I'm working on has an unusual requirement: I am unable to modify the page's HTML source. It's compiled into an app for localization purposes.

Therefore, I'm unable to insert <script> tags like I normally would to link in JavaScript files.

It turns out that the client wants to use a hosted web font, so I decided to build and append the two required <script> tags dynamically in an already-linked JavaScript file.

The <script> blocks are appending correctly in the head of the document, but function in the second block seems to be firing before the external script linked in the first <script> tag is fully loaded, and it's throwing an undefined error.

Here's the relevant piece of code:

document.getElementsByTagName("head")[0];
var tag = document.createElement('script');
tag.setAttribute("src", "http://use.typekit.com/izj3fep.js");
document.getElementsByTagName("head")[0].appendChild(tag);

try {
        Typekit.load(); // This is executing too quickly!

    } catch(e){
        console.log("Hosted fonts failed to load: " + e);
}

I tried moving the try block to the window.onload event, but that fires before any of this code is called.

I guess I could dynamically load jQuery and then use it's ready event, but that seems pretty heavy-handed. I'm hesitant to pull in a library on this project, as the client has a lot of custom JavaScript that could potentially clash with it.

What else can I try?

Matt Greer · Accepted Answer · 2012-01-05 03:38:27Z

1

You need to hook into the script element's onload event and execute your code there:

document.getElementsByTagName("head")[0];
var tag = document.createElement('script');

tag.onload = onTagLoaded;

tag.setAttribute("src", "http://use.typekit.com/izj3fep.js");
document.getElementsByTagName("head")[0].appendChild(tag);

function onTagLoaded() {
    try {
        Typekit.load(); // This is executing too quickly!
    } catch(e){
         console.log("Hosted fonts failed to load: " + e);
    }
}

answered Jan 5, 2012 at 3:38

Matt Greer

62.1k18 gold badges127 silver badges124 bronze badges

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

2 Comments

benesch Over a year ago

careful, though, this is quirky... unixpapa.com/js/dyna.html (older versions of ie seem to use an onreadystatechange instead)

Josh Earl Over a year ago

This is working in Chrome. I can't seem to get tag.onreadystatechanged to fire in IE7 or IE8. Any suggestions there? I'm so close...

Alex M · Accepted Answer · 2012-01-05 03:37:27Z

1

You can load it with yepnope ( http://yepnopejs.com/ ). I know it's a library, but it's very light (free if your client is already using modernizr). It's well worth it. Hopefully the client doesn't have another yepnope function, and you don't have to worry about the clash.

answered Jan 5, 2012 at 3:37

Alex M

3,5232 gold badges22 silver badges23 bronze badges

Comments

benesch · Accepted Answer · 2012-01-05 03:39:25Z

0

Are you using jQuery? If not, I highly recommend it. It'll make your life so much easier:

$.getScript('http://use.typekit.com/izj3fep.js', function(data, textStatus){
   try {
        Typekit.load(); //executes properly now!
    } catch(e) {
        console.log("Hosted fonts failed to load: " + e);
    }
});

answered Jan 5, 2012 at 3:39

benesch

5,2891 gold badge26 silver badges37 bronze badges

Comments

Petar Sabev · Accepted Answer · 2012-01-05 03:41:32Z

0

Combining the scripts into one big seems to be the easiest solution.

answered Jan 5, 2012 at 3:41

Petar Sabev

8686 silver badges12 bronze badges

Collectives™ on Stack Overflow

How can I delay the execution of a script block until after an external script has loaded?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related