title: Checking If the Browser Has Finished Loading the Page
body: <p>I spent mad time the in the last couple of days trying to find some code that allows me to do something when the browser has finished loading the page.</p>
  
  <p>I found this code at <a href="http://callmenick.com/post/check-if-everything-loaded-with-javascript" rel="nofollow">http://callmenick.com/post/check-if-everything-loaded-with-javascript</a></p>
  
  <pre><code>&lt;script&gt;
  var everythingLoaded = setInterval(function() {
      if (/loaded|complete/.test(document.readyState)) {
        clearInterval(everythingLoaded);
        $('div#loader').hide();
        $('div#main-container').fadeIn(1200);
      }
  }, 10);
  &lt;/script&gt;
  </code></pre>
  
  <p>This piece of code does work, but for some reason that I can't understand it <strong>interferes with</strong> this function when the page is first loaded. But once I do any <strong>resize</strong>, the function fires</p>
  
  <pre><code>$(document).ready(function() {
      equalTiles(); //sets the height equal to calculated width
  
      $(window).on('load resize orientationchange',function(){ 
          equalTiles();
      });
  
  });
  </code></pre>