带有$(window).load(函数()的Lab.js和jQuery太早了

时间:2012-05-06 18:25:28

标签: javascript jquery labjs

我使用lab.js 2.0.3并行加载我的脚本。 问题是,在“$(window).load”部分的10次中,有一部分太早发生了。 “$(document).ready”部分工作正常。

示例:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js" type="text/javascript"></script>

<script>
    $LAB
        .script("script1.js")
        .script("script2.js")
        .script("script3.js")

        .wait(function(){

            $(window).load(function() {
                // Function 1
                $("jQuery Function 1");
                // Function 2
                $("jQuery Function 2");
            });

            $(document).ready(function() {
                // Function 3
                $("jQuery Function 3");
                // Function 4
                $("jQuery Function 4");
            });

        });
</script>
我猜,我做错了什么,但不知道是什么:(

1 个答案:

答案 0 :(得分:4)

这可能是因为$(window).load()每页只触发一次。如果你错过了等待脚本加载,你错过了它。因此,在.wait.load之间,您的竞争条件无法确定您是赢还是输。

另一方面,

$(document).ready()类似于延迟对象,因为可以在事件触发后添加新的回调并且仍然会被调用。

您可以在此处看到此示例:http://jsfiddle.net/coiscir/AFszS/1/

$(window).load(function () {
    console.log('outer window.load');

    // bind after the event
    setTimeout(function () {
        $(window).load(function () {
            console.log('inner window.load'); // you'll never see this
        });
    }, 10);
});

如果您希望.ready.load具有类似效果,则可以使用Deferred Object在实际事件和回调之间进行调解:http://jsfiddle.net/coiscir/m4D46/

var windowLoad = $.Deferred();

$(window).load(windowLoad.resolve);

$LAB
    .script("script1.js")
    .script("script2.js")
    .script("script3.js")

    .wait(function(){

        windowLoad.done(function() {
            // Function 1
            $("jQuery Function 1");
            // Function 2
            $("jQuery Function 2");
        });

        $(document).ready(function() {
            // Function 3
            $("jQuery Function 3");
            // Function 4
            $("jQuery Function 4");
        });

    });