Question

The way I currently try to work around this is to get the object loaded on $(document).ready(). And run the rest of the scripts with $(window).load() . However I am still ending up adding a 0.5 sec delay to make sure that the object loads completely as it is retrieving data from 2 ajax calls.

Is there a better way of loading an object before DOM loads or at the same time but only when it is done loading the object and getting the data, and then call the rest of the functions?

document.ready =  function (){
object.initall();   
};

the initall() function calls the two methods which get data from 2 different services.

window.onload = function () {
setTimeout(function(){
    object.loadEventTable();
    object.loadChart();     
    $('#uid').text(object.lData.header.uid);        
},500);
};

Answer 1

I guess you can make it a function and put function call at the beginning section of your page. May be at the opening of your body tag

object.loadEventTable();
object.loadChart();     
window.onload = function () {
setTimeout(function(){   
    $('#uid').text(object.lData.header.uid);        
},500);
};