title: Using document.ready vs window.load to load deferred content
body: <p>I know the difference between document.ready and window.load events. Now in order to improve the performance of my website, I plan to <a href="http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS" rel="nofollow">defer loading of javascript</a>. I've seen numerous examples of lazy-loading content:</p>
  
  <ol>
  <li>Inject <code>&lt;script src="..."&gt;</code> and <code>&lt;link rel="stylesheet" href="..."&gt;</code> on document.ready</li>
  <li>Inject <code>&lt;script src="..."&gt;</code> and <code>&lt;link rel="stylesheet" href="..."&gt;</code> on window.load</li>
  <li>Inject <code>&lt;script src="..."&gt;</code> and <code>&lt;link rel="stylesheet" href="..."&gt;</code> few seconds after document.ready is fired</li>
  <li>Inject <code>&lt;script src="..."&gt;</code> and <code>&lt;link rel="stylesheet" href="..."&gt;</code> few seconds after window.load is fired</li>
  </ol>
  
  <p>My first question is which of these methods is preferable.</p>
  
  <p>My second question is that that I want to know what exactly happens when I use approach #1. If my document has this content defined in HTML source:</p>
  
  <pre><code>&lt;!-- head --&gt;
  &lt;link&gt;
  &lt;script&gt;
  &lt;!-- body --&gt;
  </code></pre>
  
  <p></p>
  
  <p>and in document.ready I inject these additional tags:</p>
  
  <pre><code>&lt;!-- head --&gt;
  &lt;link&gt;
  &lt;script&gt;
  &lt;link class="lazyload"&gt;
  &lt;script class="lazyload"&gt;
  &lt;!-- body --&gt;
  &lt;img&gt;&lt;img&gt;&lt;img&gt;&lt;img&gt;&lt;img&gt;
  </code></pre>
  
  <p>I am wondering what exactly will the browser do:</p>
  
  <ol>
  <li>When exactly will it fire the document.ready event</li>
  <li>In what order will it download the files </li>
  <li>Will it block the page while attempting to download the injected files</li>
  </ol>