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.