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 pletion 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.

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 pletion 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.

• javascript
• jquery

• Maybe you should concatenate/minify all your javascript and at the end of the very end initiate the google map. – Bradley Trager Commented Mar 12, 2014 at 19:31
• It all depends on the layout, but you can try lazy loading the images. Or even leave the src empty and set a data property with the src. Then on load you can set all the image src's to their corresponding data properties. That way the window load event will fire before the images are downloaded. And all the images will load along with the map instead of before – Smeegs Commented Mar 12, 2014 at 19:34
• 1 @Smeegs - yes, I am doing my lazy loading for content outside the window,need to show the images on the window during page load for SEO purposes. – Rohan Commented Mar 12, 2014 at 20:41
• Made an edit to my question further clarifying the point I was trying to make, which is what renders any solutions provided unusable. – Rohan Commented Mar 12, 2014 at 20:55

4 Answers 4

This I found works form me:

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

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

okay there is a way to do this, but you may not like it because it only works in modern browsers.

In HTML5 script elements have a property called async. If you set this to false with Javascript, scripts are added and run in the order they are presented in your page code.

var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script); 

link to reference

DOMReady is about as close as you can get.

$(document).ready(function(){
    //run the code here
});

Unfortunately, if the scripts you are loading further load more scripts, you can't really detect that other than watching for specific properties of the window to bee available using a setInterval.

DOMReady is about as close as you'll get, though (if you aren't) you should be following "scripts last" rule of thumb.

<body>
  <!-- Content -->

  <!--
    Other JavaScript Files
  -->
  <script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false&callback=initializeMap"></script>
  <script type="text/javascript">
    function initializeMap(){ // as specified with callback= above
      var map = new google.maps.Map(...),
          ...;
      // etc.
    }
  </script>
</body>

With that said, if images are the bottleneck, you may want to look in to lazy-loading them using some kind of plugin (jquery one referenced). this keeps bandwidth low, load time fast, and content remains "on-demand" (if they scroll down they'll get the additional content, otherwise it's never loaded).