window onload vs document ready

Question

What are the differences between JavaScript s window onload and jQuery s   document  ready   method

User · Answer

A word of caution on using   document  ready   with Internet Explorer   If an HTTP request is interrupted before the entire document is loaded  for example  while a page is streaming to the browser  another link is clicked  IE will trigger the   document  ready event     If any code within the   document  ready   event references DOM objects  the potential exists for those objects to be not found  and Javascript errors can occur   Either guard your references to those objects  or defer code which references those objects to the window load event    I have not been able to reproduce this problem in other browsers  specifically  Chrome and Firefox

User · Answer

window onload is the built-in JavaScript event  but as its implementation had subtle quirks across browsers  Firefox  Internet nbsp Explorer nbsp 6  Internet nbsp Explorer nbsp 8  and Opera   jQuery provides document ready  which abstracts those away  and fires as soon as the page s DOM is ready  doesn t wait for images  etc       document  ready  note that it s not document ready  which is undefined  is a jQuery function  wrapping and providing consistency to the following events    document ondomcontentready   document ondomcontentloaded - a newish event which fires when the document s DOM is loaded  which may be some time before the images  etc  are loaded   again  slightly different in Internet nbsp Explorer and in rest of the world and window onload  which is implemented even in old browsers   which fires when the entire page loads  images  styles  etc

User · Answer

One thing to remember  or should I say recall  is that you cannot stack onloads like you can with ready   In other words  jQuery magic allows multiple readys on the same page  but you can t do that with onload   The last onload will overrule any previous onloads   A nice way to deal with that is with a function apparently written by one Simon Willison and described in Using Multiple JavaScript Onload Functions   function addLoadEvent func        var oldonload   window onload      if  typeof window onload     function             window onload   func            else           window onload   function                 if  oldonload                    oldonload                              func                          Example use  addLoadEvent nameOfSomeFunctionToRunOnPageLoad   addLoadEvent function          More code to run on page load

User · Answer

x000D   x000D    document  ready function     x000D   x000D         Executes when the HTML document is loaded and the DOM is ready x000D      alert  Document is ready    x000D      x000D   x000D      load   method deprecated from jQuery 1 8 onward x000D    window  on  load   function     x000D   x000D          Executes when complete page is fully loaded  including x000D          all frames  objects and images x000D       alert  Window is loaded    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

A little tip   Always use the window addEventListener to add an event to window  Because that way you can execute the code in different event handlers    Correct code    x000D   x000D  window addEventListener  load   function      x000D    alert  Hello    x000D     x000D   x000D  window addEventListener  load   function      x000D    alert  Bye    x000D     x000D   x000D   x000D    Invalid code    x000D   x000D  window onload   function      x000D    alert  Hello       it will not work    x000D    x000D   x000D  window onload   function      x000D    alert  Bye     x000D    x000D   x000D   x000D    This is because onload is just property of the object  which is overwritten   By analogy with addEventListener  it is better to use   document  ready   rather than onload

User · Answer

window onload is a JavaScript inbuilt function  window onload trigger when the HTML page loaded  window onload can be written only once   document ready is a function of the jQuery library  document ready triggers when HTML and all JavaScript code  CSS  and images which are included in the HTML file are completely loaded  document ready can be written multiple times according to requirements

User · Answer

When you say   document  ready f   you tell script engine to do the following    get the object document and push it  since it s not in local scope  it must do a hash table lookup to find where document is  fortunately document is globally bound so it is a single lookup  find the object   and select it  since it s not in local scope  it must do a hash table lookup  which may or may not have collisions  find the object f in global scope  which is another hash table lookup  or push function object and initialize it  call ready of selected object  which involves another hash table lookup into the selected object to find the method and invoke it  done    In the best case  this is 2 hash table lookups  but that s ignoring the heavy work done by jQuery  where   is the kitchen sink of all possible inputs to jQuery  so another map is likely there to dispatch the query to correct handler   Alternatively  you could do this   window onload   function           which will   find the object window in global scope  if the JavaScript is optimized  it will know that since window isn t changed  it has already the selected object  so nothing needs to be done  function object is pushed on the operand stack  check if onload is a property or not by doing a hash table lookup  since it is  it is called like a function    In the best case  this costs a single hash table lookup  which is necessary because onload must be fetched    Ideally  jQuery would compile their queries to strings that can be pasted to do what you wanted jQuery to do but without the runtime dispatching of jQuery  This way you have an option of either    do dynamic dispatch of jquery like we do today   have jQuery compile your query to pure JavaScript string that can be passed to eval to do what you want  copy the result of 2 directly into your code  and skip the cost of eval

User · Answer

The ready event occurs after the HTML document has been loaded  while the onload event occurs later  when all content  e g  images  also has been loaded   The onload event is a standard event in the DOM  while the ready event is specific to jQuery  The purpose of the ready event is that it should occur as early as possible after the document has loaded  so that code that adds functionality to the elements in the page doesn t have to wait for all content to load

User · Answer

document  ready   is a jQuery event   JQuery   s   document  ready   method gets called as soon as the DOM is ready  which means that the browser has parsed the HTML and built the DOM tree   This allows you to run code as soon as the document is ready to be manipulated     For example  if a browser supports the DOMContentLoaded event  as many non-IE browsers do   then it will fire on that event   Note that the DOMContentLoaded event was only added to IE in IE9     Two syntaxes can be used for this       document   ready function        console log   ready            Or the shorthand version     function        console log   ready            Main points for   document  ready      It will not wait for the images to be loaded   Used to execute JavaScript when the DOM is completely loaded  Put event handlers here  Can be used multiple times  Replace   with jQuery when you receive    is not defined   Not used if you want to manipulate images  Use   window  load   instead      window onload   is a native JavaScript function  The window onload   event fires when all the content on your page has loaded  including the DOM  document object model   banner ads and images  Another difference between the two is that  while we can have more than one   document  ready   function  we can only have one onload function

User · Answer

The   document  ready   is a jQuery event which occurs when the HTML document has been fully loaded  while the window onload event occurs later  when everything including images on the page loaded   Also window onload is a pure javascript event in the DOM  while the   document  ready   event is a method in jQuery     document  ready   is usually the wrapper for jQuery to make sure the elements all loaded in to be used in jQuery     Look at to jQuery source code to understand how it s working   jQuery ready promise   function  obj         if    readyList              readyList   jQuery Deferred                Catch cases where   document  ready   is called after the browser event has already occurred             we once tried to use readyState  interactive  here  but it caused issues like the one            discovered by ChrisS here  http   bugs jquery com ticket 12282 comment 15         if   document readyState      complete                     Handle it asynchronously to allow scripts the opportunity to delay ready             setTimeout  jQuery ready                Standards-based browsers support DOMContentLoaded           else if   document addEventListener                    Use the handy event callback             document addEventListener   DOMContentLoaded   completed  false                    A fallback to window onload  that will always work             window addEventListener   load   completed  false                If IE event model is used           else                  Ensure firing before onload  maybe late but safe also for iframes             document attachEvent   onreadystatechange   completed                    A fallback to window onload  that will always work             window attachEvent   onload   completed                    If IE and not a frame                continually check to see if the document is ready             var top   false               try                   top   window frameElement    null  amp  amp  document documentElement                catch e                  if   top  amp  amp  top doScroll                      function doScrollCheck                         if    jQuery isReady                              try                                  Use the trick by Diego Perini                                http   javascript nwbox com IEContentLoaded                              top doScroll  left                              catch e                                return setTimeout  doScrollCheck  50                                                          detach all dom ready events                         detach                                and execute any waiting functions                         jQuery ready                                                                                  return readyList promise  obj       jQuery fn ready   function  fn            Add the callback     jQuery ready promise   done  fn         return this       Also I have created the image below as a quick references for both

User · Answer

Events    document  on  ready   handler  binds to the ready event from jQuery  The handler is called when the DOM is loaded  Assets like images maybe still are missing  It will never be called if the document is ready at the time of binding  jQuery uses the DOMContentLoaded-Event for that  emulating it if not available     document  on  load   handler  is an event that will be fired once all resources are loaded from the server  Images are loaded now  While onload is a raw HTML event  ready is built by jQuery   Functions    document  ready handler  actually is a promise  The handler will be called immediately if document is ready at the time of calling  Otherwise it binds to the ready-Event   Before jQuery 1 8    document  load handler  existed as an alias to   document  on  load  handler    Further Reading   The timing On the function ready An example Promises The removed event alias

User · Answer

window onload  A normal JavaScript event   document ready  A specific jQuery event when the entire HTML has been loaded

User · Answer

The document ready event occurs when the HTML document has been loaded  and the window onload event occurs always later  when all content  images  etc  has been loaded   You can use the document ready event if you want to intervene  early  in the rendering process  without waiting for the images to load  If you need the images  or any other  content   ready before your script  does something   you need to wait until window onload   For instance  if you are implementing a  Slide Show  pattern  and you need to perform calculations based on image sizes  you may want to wait until window onload  Otherwise  you might experience some random problems  depending on how fast the images will get loaded  Your script would be running concurrently with the thread that loads images  If your script is long enough  or the server is fast enough  you may not notice a problem  if images happen to arrive in time  But the safest practice would be allowing for images to get loaded   document ready could be a nice event for you to show some  loading     sign to users  and upon window onload  you can complete any scripting that needed resources loaded  and then finally remove the  Loading     sign   Examples  -     document ready events   document  ready function         alert  document is ready             using JQuery   function       alert  document is ready             window on load event function myFunction      alert  window is loaded        window onload   myFunction

User · Answer

A Windows load event fires when all the content on your page is fully loaded including the DOM  document object model  content and asynchronous JavaScript  frames and images  You can also use body onload   Both are the same  window onload   function     and  lt body onload  func     gt  are different ways of using the same event   jQuery  document ready function event executes a bit earlier than window onload and is called once the DOM Document object model  is loaded on your page  It will not wait for the images  frames to get fully load   Taken from the following article  how  document ready   is different from window onload

User · Answer

Document ready  a jQuery event  will fire when all the elements are in place  and they can be referenced in the JavaScript code  but the content is not necessarily loaded  Document ready executes when the HTML document is loaded     document  ready function             Code to be executed     alert  Document is ready          The window load however will wait for the page to be fully loaded  This includes inner frames  images  etc     window  load function            Fires when the page is loaded completely     alert  window is loaded

User · Answer

window onload is provided by DOM api and it says  quot  the load event fires when a given resource has loaded quot    quot The load event fires at the end of the document loading process  At this point  all of the objects in the document are in the DOM  and all the images  scripts  links and sub-frames have finished loading  quot  DOM onload But in jQuery   document  ready   will only run once the page Document Object Model  DOM  is ready for JavaScript code to execute  This does not include images  scripts  iframes etc  jquery ready event So the jquery ready method will run earlier than the dom onload event

[javascript] window.onload vs $(document).ready()

Examples related to javascript

Examples related to jquery

Examples related to dom-events

Examples related to unobtrusive-javascript