When to use “window.onload”?

by

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', ...

More Related Contents:

  1. iFrame onload JavaScript event
  2. Checkbox hidden on body load [closed]
  3. How to run a function when the page is loaded?
  4. iFrame src change event detection?
  5. How do I call a JavaScript function on page load?
  6. Trying to fire the onload event on script tag
  7. Execute write on doc: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
  8. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  9. How to run function in AngularJS controller on document ready?
  10. ‘onload’ handler for ‘script’ tag in internet explorer
  11. Javascript read file without using input
  12. Best practice for using window.onload
  13. Cannot set property ‘innerHTML’ of null
  14. Attach a body onload event with JS
  15. AngularJS – Image “onload” event
  16. What html tags support the onload/onerror javascript event attributes?
  17. Difference between onload() and $.ready?
  18. Load event not fired on Safari when reloading page
  19. Recall Tampermonkey script when page location changes
  20. javascript – document.write error?
  21. Javascript before onload?
  22. Hook a javascript event to page load
  23. Async-loaded scripts with DOMContentLoaded or load event handlers not being called?
  24. Is there a way to have an onload callback after changing window.location.href?
  25. Is bubbling available for image load events?
  26. Sort out array of object using its value [duplicate]
  27. Create an object from an array of keys and an array of values
  28. jQuery ajax load() java script not executing?
  29. sort outer array based on values in inner array, javascript
  30. How to add “refs” dynamically with react hooks?

Leave a Comment