Question

I have an initialise function in my app that I want to trigger when two conditions have been met: 1) the window has loaded: $(window).load() and 2) Typekit has loaded.

$(window).load(function() {
    try {
        Typekit.load({ active: initialise });
    } catch (e) {}
});

At the moment, this code is waiting until the window has loaded (including all resources e.g. images) before it starts to load the Typekit web fonts, and then, when they have loaded too, it will initialise.

However, I want Typekit to load before the window has loaded. They should load asynchronously. So:

$(window).load(initialise);

try {
    Typekit.load({ active: initialise });
} catch (e) {}

Now the Web fonts are loading asynchronously, but the problem is, I need the initialise function to trigger only when both 1) the window has loaded: $(window).load() and 2) Typekit has loaded. Sometimes, the window will load before Typekit has loaded, and sometimes it is the other way round.

So my question is: how can I trigger initialise as soon as both of my criteria have been fulfilled?

Answer 1

I found a solution that uses jQuery’s $.holdReady:

$.holdReady(true);

Typekit.load({
    active: function () {
        $.holdReady(false);
    }
});

$window.load(function () {
    $document.ready(initialize);
});