Never use window.onload

The window.onload event gets fired when all resources - including images, external script, CSS - of a page have been loaded.

If you want to do something when that event has been fired you should always use the window.addEventListener method.

window.addEventListener("load", function() {
  console.log('Site has been loaded');
});

Here is why:

  window.onload = function() {
    console.log('Site has been loaded')
  }

Consider this code above, the result is exactly the same as when using the addEventListener method.

So what is the difference?

The window.onload property can only be assigned once!

window.onload = function() {
  console.log('This will not be logged')
}

window.onload = function() {
  console.log('Because its overwritten here!')
}

This can lead to ugly bugs and unintended behavior.

Here is a codepen demonstrating this behavior.