Make all JS wait for page load

Question

I have alot of javascript on a page, It can't be combined.

It's bugging me with the amount of "document.wait" and so forth functions on each of them, is there a better way of doing this, or am I stuck with it?

Goog'ling has revealed nothing.

You might want to google again, this time with `load event`. — Denys Séguret, Jan 23 '14 at 18:41
you should use: $(function(){ //type code here// }); its not just waiting for the page load, but also prevent users to run your functions on the console. — Idan Magled, Jan 23 '14 at 18:53

score 2 · Accepted Answer · edited May 23 '17 at 12:28

As said by others move all your scripts to the bottom of the page, right before </body>. It will solve many of your issues. But it will not tackle all the subtleties of browser-inconsistencies specially for old IE.

If you want to get a glimpse of how tricky is to provide such cross-browser implementation, take a look at the following popular question:

$(document).ready equivalent without jQuery

For instance do not lean against document.addEventListener as IE proposes its own proprietary document.attachEvent. And this is only the very first step.

score 1 · Answer 2 · answered Jan 23 '14 at 18:44

The best practice is to always put script tags just before you close the body:

  <script src="path/to/my/script"></script>
  <!-- more scripts, etc -->
</body>

This way, everything else is definitely already loaded and no need to "wait". See this recommendation from google.

Otherwise, you can use:

window.addEventListener('load', function() {
  //your js here
});

Make all JS wait for page load

2 Answers2