title: Order of $(document).load() and $(document).ready() when deferring loading js
body: <p>Before I change all my code, I just want to verify that I need to.</p>
  
  <p>I have several inline js and jquery functions that are in the ready() function:</p>
  
  <pre><code>$(document).ready(function(){ do_something(); ...
  </code></pre>
  
  <p>Many of these functions rely on other functions that are contained in an external js document. They also use classes that are defined in the external style sheet.</p>
  
  <p>Now I have just changed the loading of my external js and css such that it is deferred (as recommended by Google <a href="https://developers.google.com/speed/docs/best-practices/payload?hl=en#DeferLoadingJS" rel="noreferrer">https://developers.google.com/speed/docs/best-practices/payload?hl=en#DeferLoadingJS</a>):</p>
  
  <pre><code> if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
  </code></pre>
  
  <p>This way the page is fully rendered, including all images, before it starts to load the JS.</p>
  
  <p>This works fine. However, I'm wondering why and whether it always will. Isn't $(document).ready() executed before onLoad? Won't I risk not having the necessary functions defined when $(document).ready is executed? </p>
  
  <p>So, do I need to change every $(document).ready to $(document).load()? Or, at least some of them? But then which onLoad() is executed first? The one that loads the external js (which is defined in the header) or the inline ones? what do I lose by changing  ready to load? Might I, for example, risk that an event is not attached to an element when a user clicks on the element?</p>
  
  <p>Btw, the jquery api is not deferred because that caused problems when I went to execute other code. </p>