window onload vs document onload

Question

Which is more widely supported  window onload or document onload

User · Answer

Add Event Listener   lt script type  text javascript  gt    document addEventListener  DOMContentLoaded   function event             - Code to execute when all DOM content is loaded            - including fonts  images  etc         lt  script gt      Update March 2017  1 Vanilla JavaScript  window addEventListener  load   function         console log  All assets are loaded          2 jQuery    window  on  load   function         console log  All assets are loaded         Good Luck

User · Answer

window onload however they are often the same thing   Similarly body onload becomes window onload in IE

User · Answer

The general idea is that window onload fires when the document s window is ready for presentation and document onload fires when the DOM tree  built from the markup code within the document  is completed   Ideally  subscribing to DOM-tree events  allows offscreen-manipulations through Javascript  incurring almost no CPU load  Contrarily  window onload can take a while to fire  when multiple external resources have yet to be requested  parsed and loaded    Test scenario   To observe the difference and how your browser of choice implements the aforementioned event handlers  simply insert the following code within your document s -  lt body gt - tag    lt script language  javascript  gt  window tdiff       fred   function a b  return a-b    window document onload   function e        console log  document onload   e  Date now    window tdiff         window tdiff 0    Date now     amp  amp  window tdiff reduce fred        window onload   function e        console log  window onload   e  Date now    window tdiff        window tdiff 1    Date now     amp  amp  window tdiff reduce fred         lt  script gt     Result   Here is the resulting behavior  observable for Chrome v20  and probably most current browsers      No document onload event  onload fires twice when declared inside the  lt body gt   once when declared inside the  lt head gt   where the event then acts as document onload    counting and acting dependent on the state of the counter allows to emulate both event behaviors   Alternatively declare the window onload event handler within the confines of the HTML- lt head gt  element     Example Project   The code above is taken from this project s codebase  index html and keyboarder js      For a list of event handlers of the window object  please refer to the MDN documentation

User · Answer

According to Parsing HTML documents - The end    The browser parses the HTML source and runs deferred scripts  A DOMContentLoaded is dispatched at the document when all the HTML has been parsed and  have run  The event bubbles to the window  The browser loads resources  like images  that delay the load event  A load event is dispatched at the window    Therefore  the order of execution will be   DOMContentLoaded event listeners of window in the capture phase DOMContentLoaded event listeners of document DOMContentLoaded event listeners of window in the bubble phase load event listeners  including onload event handler  of window   A bubble load event listener  including onload event handler  in document should never be invoked  Only capture load listeners might be invoked  but due to the load of a sub-resource like a stylesheet  not due to the load of the document itself    x000D   x000D  window addEventListener  DOMContentLoaded   function     x000D    console log  window - DOMContentLoaded - capture       1st x000D     true   x000D  document addEventListener  DOMContentLoaded   function     x000D    console log  document - DOMContentLoaded - capture       2nd x000D     true   x000D  document addEventListener  DOMContentLoaded   function     x000D    console log  document - DOMContentLoaded - bubble       2nd x000D      x000D  window addEventListener  DOMContentLoaded   function     x000D    console log  window - DOMContentLoaded - bubble       3rd x000D      x000D   x000D  window addEventListener  load   function     x000D    console log  window - load - capture       4th x000D     true   x000D  document addEventListener  load   function e    x000D       Filter out load events not related to the document    x000D    if   style   script   indexOf e target tagName toLowerCase     lt  0  x000D      console log  document - load - capture       DOES NOT HAPPEN x000D     true   x000D  document addEventListener  load   function     x000D    console log  document - load - bubble       DOES NOT HAPPEN x000D      x000D  window addEventListener  load   function     x000D    console log  window - load - bubble       4th x000D      x000D   x000D  window onload   function     x000D    console log  window - onload       4th x000D     x000D  document onload   function     x000D    console log  document - onload       DOES NOT HAPPEN x000D     x000D   x000D   x000D

User · Answer

When do they fire   window onload   By default  it is fired when the entire page loads  including its content  images  CSS  scripts  etc      In some browsers it now takes over the role of document onload and fires when the DOM is ready as well   document onload   It is called when the DOM is ready which can be prior to images and other external content is loaded    How well are they supported   window onload appears to be the most widely supported  In fact  some of the most modern browsers have in a sense replaced document onload with window onload   Browser support issues are most likely the reason why many people are starting to use libraries such as jQuery to handle the checking for the document being ready  like so     document  ready function        code here          function        code here            For the purpose of history  window onload vs body onload      A similar question was asked on codingforums a while   back regarding the usage of window onload over body onload  The   result seemed to be that you should use window onload because it is   good to separate your structure from the action

User · Answer

In short  window onload is not supported by IE 6-8 document onload is not supported by any modern browser  event is never fired    x000D   x000D  window onload          gt  console log  window onload works         fired document onload        gt  console log  document onload works       not fired x000D   x000D   x000D

User · Answer

In Chrome  window onload is different from  lt body onload    gt   whereas they are the same in both Firefox version 35 0  and IE  version 11    You could explore that by the following snippet    lt  DOCTYPE html gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt           lt  --import css here-- gt           lt  --import js scripts here-- gt            lt script language  javascript  gt               function bodyOnloadHandler                     console log  body onload                               window onload   function e                    console log  window loaded                            lt  script gt       lt  head gt        lt body onload  bodyOnloadHandler    gt           Page contents go here        lt  body gt   lt  html gt    And you will see both  window loaded  which comes firstly  and  body onload  in Chrome console  However  you will see just  body onload  in Firefox and IE  If you run  window onload toString    in the consoles of IE  amp  FF  you will see       function onload event    bodyOnloadHandler        which means that the assignment  window onload   function e      is overwritten

User · Answer

Window onload is the standard  however - the web browser in the PS3  based on Netfront  doesn t support the window object  so you can t use it there

User · Answer

window onload and onunload are shortcuts to document body onload and document body onunload  document onload and onload handler on all html tag seems to be reserved however never triggered   onload  in document -  true

[javascript] window.onload vs document.onload

`Update March 2017`

1 Vanilla JavaScript

2 jQuery

Examples related to javascript

Examples related to event-handling

Examples related to dom-events