When to use "window.onload"?

window.onload just runs when the browser gets to it.

window.addEventListener waits for the window to be loaded before running it.

In general you should do the second, but you should attach an event listener to it instead of defining the function. For example:

window.addEventListener('load', 
  function() { 
    alert('hello!');
  }, false);

The other answers all seem out of date

First off, putting scripts at the top and using window.onload is an anti-pattern. It's left over from IE days at best or mis-understandings of JavaScript and the browser at worst.

You can just move your scripts the the bottom of your html

<html>
  <head>
   <title>My Page</title>
  </head> 
  <body>
    content

    <script src="some-external.js"></script>
    <script>
      some in page code
    </script>
  </body>
</html>

The only reason people used window.onload is because they mistakenly believed scripts needed to go in the head section. Because things are executed in order if your script was in the head section then the body and your content didn't yet exist by definition of execute in order.

The hacky workaround was to use window.onload to wait for the rest of the page to load. Moving your script to the bottom also solved that issue and now there's no need to use window.onload since your body and content will have already been loaded.

The more modern solution is to use the defer tag on your scripts but to use that your scripts need to all be external.

<head>
    <script src="some-external.js" defer></script>
    <script src="some-other-external.js" defer></script>
</head>

This has the advantage that the browser will start downloading the scripts immediately and it will execute them in the order specified but it will wait to execute them until after the page has loaded, no need for window.onload or the better but still unneeded window.addEventListener('load', ...


Here's the documentation on MDN.

According to it:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Your first snippet of code will run as soon as browser hit this spot in HTML.

The second snippet will trigger popup when the DOM and all images are fully loaded (see the specs).

Considering the alert() function, it doesn't really matter at which point it will run (it doesn't depend on anything besides window object). But if you want to manipulate the DOM - you should definitely wait for it to properly load.

Tags:

Javascript

Onload Event

Onload

Recent Posts