Never use window.onload
June 17, 2020
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.