Javascript event to fire after all script files have been loaded

Question

My website is image intensive which means images take up a huge amount of my page load time. I am using the google maps API which works better if run on a window load event, however given that window load waits for all images to load first, the user experience on the map is affected negatively to an extent.

This can be remedied if I can get a separate event that targets just the completion of loading for the script files and begins rendering the map without concerning itself about the status of the images.

Now I know this is a weird thing to do, but given the scenario I have explained, any insights or workarounds over this will be helpful.

PS : Since I am loading my maps with the cluster module, I have no other option but to wait for all the scripts to load first, hence document ready is not an option. Also loading scripts before the map initiation js doesn't work since the map clustering always occurs with a delay loading external javascript and hence I have to rely on window load.

Answer 1

This I found works form me:

var everythingLoaded = setInterval(function() {
  if (/loaded|complete/.test(document.readyState)) {
    clearInterval(everythingLoaded);
    init(); // this is the function that gets called when everything is loaded
  }
}, 10);

reference: http://callmenick.com/post/check-if-everything-loaded-with-javascript