在继续使用document.ready代码之前等待第一个事件完成

Question

My question is simple.

I have some configuration and loading that needs to be done before a document.ready() call.

// initialize ASAP so it loads super fast
soundManager.setup({
    url: 'swf/',
    onready: SMOnReadyHandler
});

This onready event handler is likely to take, say, a long time before completion.

After THIS, I want to call a document.ready() event listener to load the rest of my page, as so:

$(document).ready(function() { 
    // code here might be dependent on the completion of 
    // soundManager.onready event handler 
});

How do I ensure that $(document).ready occurs only after the soundManager.onready handler has completed fully?

Thanks a lot in advance!

Answer 1

You could use a deferred :

var soundManagerDeferred = $.Deferred();

soundManager.setup({
    url: 'swf/',
    onready: SMOnReadyHandler
});

function SMOnReadyHandler() {
    soundManagerDeferred.resolve();
}

$(document).ready(function() {
    soundManagerDeferred.done(function() {
        //init
    });
});

Answer 2

You can't, because the browser is who determines when the DOM is ready. My suggestion is, simply remove your document.ready handler, and pass your startup function to the sound manager's onready . I mean, replace this:

$(document).ready(function() { 
    // do init stuff 
});

With this:

function initStuff() {
    // do init stuff 
}
soundManager.setup({
    url: 'swf/',
    onready: initStuff
});

To ensure that you don't reference any element that's not in the DOM already, add the code to the end of your html, right before </body> .