Запускать функцию JavaScript после загрузки окна, включая любые асинхронные загрузки

Question

У меня в приложении есть функция initialise, которую я хочу активировать при выполнении двух условий: 1) загружено окно: $(window).load() и 2) загружен Typekit.

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

В данный момент этот код ожидает загрузки окна (включая все ресурсы, например изображения), прежде чем он начнет загружать веб-шрифты Typekit, а затем, когда они тоже загрузятся, будет инициализирован.

Однако я хочу, чтобы Typekit загрузился до загрузки окна. Они должны загружаться асинхронно. Итак:

$(window).load(initialise);

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

Теперь веб-шрифты загружаются асинхронно, но проблема в том, что мне нужна функция initialise для запуска только тогда, когда 1) загружено окно: $(window).load() и 2) загружен Typekit. Иногда окно загружается до загрузки Typekit, а иногда наоборот.

Итак, мой вопрос: как я могу вызвать initialise, как только оба моих критерия будут выполнены?

Answer 1

Инкремент и тест на каждом событии. Как только ready будет положительным, initialize сработает:

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

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

        function initialize() {
            //do work
        }
    }

Answer 2

Я нашел решение, которое использует jQuery's $.holdReady:

$.holdReady(true);

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

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

Answer 3

load() не правильный метод для запуска при загрузке окна. Это ready().

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

Метод ready() немедленно запустит обратный вызов, если окно уже загружено. Метод load() привязывает обработчик события к событию load DOM, которое в тот момент уже было запущено. Таким образом, обработчик никогда не вызывается.

Answer 4

Вы можете использовать setInterval и проверить две переменные, которые будут установлены

var windowLoaded = false, typeKitLoaded = false, myLoadedInterval = null;
$(window).load(function() { windowLoaded = true; if ( myLoadedInterval == null ) beginInterval(); });
try {
    Typekit.load({ active: function() { typeKitLoaded = true; if ( myLoadedInterval == null ) beginInterval(); } });
} catch (e) {}

function beginInterval()
{
    myLoadedInterval = setInterval(function() {
        if ( typeKitLoaded && windowLoaded ) 
        {
            clearInterval(myLoadedInterval);
            initialise();
        } 
    }, 25);
}