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?

Answer 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);
    }
}