Waiting for the completion of the first event before continuing with document.ready code

Question

My question is simple.

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

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

This onready event onready is likely to take, say, a long time to complete.

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

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

How to ensure that $(document).ready occurs only after the soundManager.onready handler completes completely?

Many thanks!

Answer 1

You can use deferred :

 var soundManagerDeferred = $.Deferred(); soundManager.setup({ url: 'swf/', onready: SMOnReadyHandler }); function SMOnReadyHandler() { soundManagerDeferred.resolve(); } $(document).ready(function() { soundManagerDeferred.done(function() { //init }); }); 

Answer 2

You cannot, as the browser determines when the DOM is ready. My suggestion is to simply remove the document.ready handler and pass its start function to the onready sound manager. I mean, replace this:

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

Wherein:

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

To ensure that you are not referencing any element that is not in the DOM, add code to the end of your html, right before the </body> .