Using jQuery the following would log that the app had loaded once the DOM and all assets had been downloaded by the browser:

$(window).load(function() {

    console.log('app loaded');

});

However I don't want this check to happen until after some other things have run.

So for example:

function checkLoaded()
{           
    $(window).load(function() {

        console.log('app loaded');

    });
}

So let's say I call this function after a bunch of other functions.

The problem is, because $(window).load(function() is an event listener, when I call the checkLoaded() function the event won't ALWAYS run (because it MAY have already been fired because everything has downloaded BEFORE the checkLoaded() function has run).

Any ideas on how I can do this?

I tried this:

function checkLoaded()
{           
    if(loaded)
    {
        console.log('app loaded');
    }
    else
    {
        checkLoaded(); // keep checking until the loaded bees true
    }
}

$(window).load(function(){

    loaded = true;

});

But the problem here is that the checkLoaded function COULD get called hundreds of times in a few seconds and isn't a nice way of handling this.

UPDATE: The function is called using checkLoaded(); Just so everyone knows I am calling the function!

UPDATE 2:

The plan is essentially this:

function init() {

    start();

}();

function start() {

    // Show Preloader... and other stuff

    /// Once all logic has finished call checkLoaded

    checkLoaded();

}

function checkLoaded() {

    if(loaded) {

        show();

    }

}

function show() {

    ... // show app

}

So I should be able to know if the status of loaded is true, but keep checking until it bees true as it may be true or false when I get to the checking stage.

Using jQuery the following would log that the app had loaded once the DOM and all assets had been downloaded by the browser:

$(window).load(function() {

    console.log('app loaded');

});

However I don't want this check to happen until after some other things have run.

So for example:

function checkLoaded()
{           
    $(window).load(function() {

        console.log('app loaded');

    });
}

So let's say I call this function after a bunch of other functions.

The problem is, because $(window).load(function() is an event listener, when I call the checkLoaded() function the event won't ALWAYS run (because it MAY have already been fired because everything has downloaded BEFORE the checkLoaded() function has run).

Any ideas on how I can do this?

I tried this:

function checkLoaded()
{           
    if(loaded)
    {
        console.log('app loaded');
    }
    else
    {
        checkLoaded(); // keep checking until the loaded bees true
    }
}

$(window).load(function(){

    loaded = true;

});

But the problem here is that the checkLoaded function COULD get called hundreds of times in a few seconds and isn't a nice way of handling this.

UPDATE: The function is called using checkLoaded(); Just so everyone knows I am calling the function!

UPDATE 2:

The plan is essentially this:

function init() {

    start();

}();

function start() {

    // Show Preloader... and other stuff

    /// Once all logic has finished call checkLoaded

    checkLoaded();

}

function checkLoaded() {

    if(loaded) {

        show();

    }

}

function show() {

    ... // show app

}

So I should be able to know if the status of loaded is true, but keep checking until it bees true as it may be true or false when I get to the checking stage.

• javascript
• jquery

• What are "the other things" ? – Merlin Commented Feb 14, 2014 at 10:51
• So why do you need to wrap it inside window onload? – A. Wolff Commented Feb 14, 2014 at 10:52
• How else would I know that the browser has downloaded all assets? Like I said it won't ALWAYS happen, but sometimes the download BEFORE the function gets called. – Cameron Commented Feb 14, 2014 at 10:53
• Looks like an XY problem, so why are you wrapping window onload event inside checkLoaded() function? Could you provide a more concrete sample of your issue? – A. Wolff Commented Feb 14, 2014 at 10:55
• in your edit code, using a timeout to recall function would work BUT why would you need that? Ok, i think i misunderstood "assets" terms, sorry – A. Wolff Commented Feb 14, 2014 at 10:59

5 Answers 5

You run it either on window load or if it's already done using such kind of code:

function onLoad(loading, loaded) {
    if (document.readyState === 'plete') {
        return loaded();
    } 
    loading();

    if (window.addEventListener) {
        window.addEventListener('load', loaded, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', loaded);
    }
}

onLoad(function() {
    console.log('I am waiting for the page to be loaded');
}, function() {
    console.log('The page is loaded');
});

var loaded=false;
$(window).load(function() {
    loaded=true;
});
function checkLoaded()
{
     // do something if loaded===true 
}

Try this

function checkLoaded()
{           
    $(window).load(function() {

        console.log('app loaded');

    });
}
checkLoaded();

you want to make checkLoaded block and thats a bad idea:

javascript has no threads and blocking like that will just burn CPU while potentially blocking the whole script.

don't wait like you do for loaded to be to true. use the eventhandler as it is meant to be used.

maybe give checkLoaded a parameter to a function you want called:

function checkLoaded(continueWhenLoaded) {
     $(window).load(function() {
         continueWhenLoaded();
     });
}

Have you looked into a solution involving jQuery's .promise() and .done()? Look at some of the examples in the documentation, it might be what you are looking for.