Execute JavaScript function after the window has finished loading, regardless of any asynchronous downloads

Question

Execute JavaScript function after the window has finished loading, regardless of any asynchronous downloads

In my app, there is an initialise function that I want to execute only when two conditions are met: first, the window has finished loading ($(window).load()), and second, Typekit has loaded.

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

Currently, this code waits for all resources, such as images, to finish loading before it starts loading the Typekit web fonts. After the fonts have loaded, then the initialisation process begins.

However, I need Typekit to load before the window finishes loading in an asynchronous manner. Therefore, the revised code should be:

$(window).load(initialise);

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

Now, the Web fonts load asynchronously. The challenge now is ensuring that the initialise function triggers only when both conditions have been met. Sometimes, the window loads before Typekit, and other times the opposite happens.

So, how can I ensure that initialise is triggered once both criteria are fulfilled?

javascript load webfonts

Answer 1

Answer №1

Test and advance with each occurrence. When the variable ready becomes positive, the function initialize will be triggered:

   {
        var ready = -1;
        $(window).load(function() {
            if (++ready) initialize();
        });

        try {
            Typekit.load({
                active: function() {
                    if (++ready) initialize();
                }
            });
        } catch (e) {}

        function initialize() {
            //perform necessary tasks
        }
    }

Answer 2

Test and advance with each occurrence. When the variable ready becomes positive, the function initialize will be triggered:

   {
        var ready = -1;
        $(window).load(function() {
            if (++ready) initialize();
        });

        try {
            Typekit.load({
                active: function() {
                    if (++ready) initialize();
                }
            });
        } catch (e) {}

        function initialize() {
            //perform necessary tasks
        }
    }

Answer 3

Answer №2

load() is not the best choice for triggering actions when the window has finished loading. It's better to use ready().

Typekit.load({
    active: function () {
        $(document).ready(initialize);
    }
});

The ready() method will execute the callback immediately if the window is already loaded. On the other hand, the load() method attaches an event handler to the load event of the DOM, which may have already occurred by that point. Therefore, the handler may never be called.

Answer 4

load() is not the best choice for triggering actions when the window has finished loading. It's better to use ready().

Typekit.load({
    active: function () {
        $(document).ready(initialize);
    }
});

The ready() method will execute the callback immediately if the window is already loaded. On the other hand, the load() method attaches an event handler to the load event of the DOM, which may have already occurred by that point. Therefore, the handler may never be called.

Answer 5

Answer №3

I came across a clever fix that utilizes jQuery's $.holdReady:

$.holdReady(true);

GoogleFonts.load({
    ready: function () {
        $.holdReady(false);
    }
});

$window.ready(function () {
    $document.ready(initializePage);
});

Answer 6

I came across a clever fix that utilizes jQuery's $.holdReady:

$.holdReady(true);

GoogleFonts.load({
    ready: function () {
        $.holdReady(false);
    }
});

$window.ready(function () {
    $document.ready(initializePage);
});

Answer 7

Answer №4

To ensure that both the window and Typekit are loaded, you can create a setInterval function that checks for two variables being set.

var isWindowLoaded = false, isTypeKitLoaded = false, myInterval = null;
$(window).load(function() { isWindowLoaded = true; if (myInterval == null) startChecking(); });
try {
    Typekit.load({ active: function() { isTypeKitLoaded = true; if (myInterval == null) startChecking(); } });
} catch (error){}

function startChecking()
{
    myInterval = setInterval(function() {
        if (isTypeKitLoaded && isWindowLoaded) 
        {
            clearInterval(myInterval);
            initialize();
        } 
    }, 25);
}

Answer 8

To ensure that both the window and Typekit are loaded, you can create a setInterval function that checks for two variables being set.

var isWindowLoaded = false, isTypeKitLoaded = false, myInterval = null;
$(window).load(function() { isWindowLoaded = true; if (myInterval == null) startChecking(); });
try {
    Typekit.load({ active: function() { isTypeKitLoaded = true; if (myInterval == null) startChecking(); } });
} catch (error){}

function startChecking()
{
    myInterval = setInterval(function() {
        if (isTypeKitLoaded && isWindowLoaded) 
        {
            clearInterval(myInterval);
            initialize();
        } 
    }, 25);
}

Execute JavaScript function after the window has finished loading, regardless of any asynchronous downloads

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Arrange the array depending on the existence of properties in the objects

Creating a custom PHP webpage and integrating it with a WordPress theme

Tips for updating the DOM within a map function by utilizing the onChange event with a checkbox and react hooks

When I click the button, it deletes the DOM element and hides it, preventing me from

How can you effectively load shared header and panel HTML onto pages located in separate directories using jQuery Mobile?

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

When scrolling, dynamically change the background color by adding a class

Mastering the art of switching between different application statuses in ReactJS

Using React and Material-UI: Implementing button functionality to call another class using hooks in the main App component

Determining outcomes of forms added in real-time

Concentrating on div elements using React

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

A guide on setting up a countdown timer in Angular 4 for a daily recurring event with the help of Rxjs Observable and the Async Pipe

How can I reduce the delay in Angular 5 to a minimum?

Adjust the size of a div by clicking a button using Javascript

Unable to access the following element using jQuery's next() method

Retrieving information from a JSON web service can easily be done using just JavaScript and jQuery

Contrasting .queue() with jquery.queue()

Guide to integrating jssor into an AngularJS application

Conceal the loading spinner in JQuery once the image has finished loading