title: How to execute code before window.load and after DOM has been loaded?
body: <p>Here is the circumstance:
  I have 2 pages:</p>
  <ul>
  <li>1 x html page<br/></li>
  <li>1 x external Javascript<br/></li>
  </ul>
  <p>Now in the html page, there will be internal Javascript coding to allow the placement of the <code>window.onload</code>, and other page specific methods/functions.</p>
  <p>But, in the external Javascript I want certain things to be done before the <code>window.onload</code> event is triggered. This is to allow customized components to be initialized first.</p>
  <p>Is there a way to ensure initialization to occur in the external Javascript before the  <code>window.onload</code> event is triggered?</p>
  <p>The reason I have asked this, is to attempt to make reusable code (build once - use all over), to which the external script must check that it is in 'order/check' before the Javascript in the main html/jsp/asp/PHP page takes over. And also I am not looking for a solution in jQuery @_@</p>
  <p>Here are some of the links on Stack Overflow I have browsed through for a solution:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3">Javascript - How to detect if document has loaded (IE 7/Firefox 3)</a><br/></li>
  <li><a href="https://stackoverflow.com/questions/8448907/how-to-check-if-page-has-fully-loadedscripts-and-all">How to check if page has FULLY loaded(scripts and all)?</a><br/></li>
  <li><a href="https://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded">Execute Javascript When Page Has Fully Loaded</a></li>
  </ul>
  <p>Can someone help or direct me to a solution, your help will be muchness of greatness appreciated.</p>
  <hr/>
  [updated response - 19 November 2012]
  <p>Hi all, thanks for you advice and suggested solutions, they have all been useful in the search and testing for a viable solution.
  Though I feel that I am not 100% satisfied with my own results, I know your advice and help has moved me closer to a solution, and may indeed aid others in a similar situation.</p>
  <p>Here is what I have come up with:</p>
  <p>test_page.html</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;loader.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;test_script_1.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;test_script_2.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  window.onload = function() {
      document.getElementById(&quot;div_1&quot;).innerHTML = &quot;window.onload complete!&quot;;
  }
  &lt;/script&gt;
  
  &lt;style type=&quot;text/css&quot;&gt;
  div {
      border:thin solid #000000;
      width:500px;
  }
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;div_1&quot;&gt;&lt;/div&gt;
  
      &lt;br/&gt;&lt;br/&gt;
  
      &lt;div id=&quot;div_2&quot;&gt;&lt;/div&gt;
  
      &lt;br/&gt;&lt;br/&gt;
  
      &lt;div id=&quot;div_3&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>loader.js</p>
  <pre><code>var Loader = {
      methods_arr : [],
  
      init_Loader : new function() {
          document.onreadystatechange = function(e) {
              if (document.readyState == &quot;complete&quot;) {
                  for (var i = 0; i &lt; Loader.methods_arr.length; i++) {
                      Loader.method_arr[i]();
                  }
              }
          }
      },
  
      load : function(method) {
          Loader.methods_arr.push(method);
      }
  }
  </code></pre>
  <p>test_script_1.js</p>
  <pre><code>Loader.load(function(){initTestScript1();});
  
  function initTestScript1() {
      document.getElementById(&quot;div_1&quot;).innerHTML = &quot;Test Script 1 Initialized!&quot;;
  }
  </code></pre>
  <p>test_script_2.js</p>
  <pre><code>Loader.load(function(){initTestScript2();});
  
  function initTestScript2() {
      document.getElementById(&quot;div_2&quot;).innerHTML = &quot;Test Script 2 Initialized!&quot;;
  }
  </code></pre>
  <p>This will ensure that scripts are invoked before invocation of the <code>window.onload</code> event handler, but also ensuring that the document is rendered first.</p>
  <p>What do you think of this possible solution?</p>
  <p>Thanking you all again for the aid and help :D</p>