Lab.js and jQuery with $(window).load(function() fire much too early

Question

i use lab.js 2.0.3 for parallel loading my scripts. the problem is, that in 1 of 10 times the "$(window).load" part fired much too early. the part with "$(document).ready" works fine.

example:

<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>

i guess, that i do something wrong, but don't know what : (

And why do you need the window.load? Can't you just put everything inside the `$(document).ready()`? — Fabrício Matté, May 06 '12 at 18:26
What is your definition of "too early?" Before `script[123].js` has loaded? — Matt Ball, May 06 '12 at 18:27
i cant't call "script1" with $(document).ready(). don't know why, but it will not work. the script developer writes this on his site. — ComixZ, May 06 '12 at 18:32

Jonathan Lonowski · Accepted Answer · 2012-05-06T19:12:59.257

This may be because $(window).load() only ever fires once per page. If you missed it waiting on the scripts to load, you missed it. So, between .wait and .load, you have a race condition that's not really predictable whether you'll win or lose.

$(document).ready(), on the other hand, is similar to Deferred Objects in that new callbacks can be added after the event has fired and will still be called.

You can see this demonstrated here: 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);
});

If you want a similar effect as .ready for .load, you can use a Deferred Object to mediate between the actual event and your callbacks: 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");
        });

    });

so it does not matter, which script loader i use? $(window).load sometimes works correct and sometimes does not wait? i can't influence that? — ComixZ, May 06 '12 at 18:56
@user1378406 You can't influence `.load` directly, but you can introduce your own deferred object to mediate it and your callbacks. See my edit. — Jonathan Lonowski, May 06 '12 at 19:08
-big thanks. window.load will work now perfectly. but now i have the same problem with document.ready. every second or third time the function comes earlier than the script is ready. — ComixZ, May 06 '12 at 19:18
ignore my last comment. the main problem is solved. document.ready works fine,too. a function itself has an error. THANKS — ComixZ, May 06 '12 at 19:35

Lab.js and jQuery with $(window).load(function() fire much too early

1 Answers1