CODEWITHSUNDEEP
javascriptjquery
Rohan
Rohan

Reputation: 3334

Javascript event to fire after all script files have been loaded

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.

Upvotes: 8

Views: 22178

Answers (4)

Goran B.
Goran B.

Reputation: 69

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

Upvotes: 6

user2782001
user2782001

Reputation: 3488

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

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101604

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.com/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).

Upvotes: 0

Kevin B
Kevin B

Reputation: 95023

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 become available using a setInterval.

Upvotes: 1

Related Questions