javascript - 窗口加载后运行 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) {}

现在 Web 字体正在异步加载，但问题是，我需要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 的解决方案$.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);
}