检查浏览器是否已完成加载页面

Question

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.

I found this code at http://callmenick.com/post/check-if-everything-loaded-with-javascript

<script>
var everythingLoaded = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      clearInterval(everythingLoaded);
      $('div#loader').hide();
      $('div#main-container').fadeIn(1200);
    }
}, 10);
</script>

This piece of code does work, but for some reason that I can't understand it interferes with this function when the page is first loaded. But once I do any resize , the function fires

$(document).ready(function() {
    equalTiles(); //sets the height equal to calculated width

    $(window).on('load resize orientationchange',function(){ 
        equalTiles();
    });

});

Answer 1

jQuery's $(document).ready() helper is different to the window load event. Here is the difference:

$(document).ready(function() {
  // The browser is now aware of the entire DOM structure,
  // but images and other resources may not have finished downloading yet.
  // Include code here that depends on a DOM element being present,
  // but doesn't depend on images being fully loaded yet.

  // It looks none of your code actually wants to be in here as it all depends on images.
});

$(window).on("load", function() {
  // All images are loaded now.
  // Include code here that depends on images being loaded.

  equalTiles();
  $('div#loader').hide();
  $('div#main-container').fadeIn(1200);

  $(window).on("resize orientationchange", function(){ 
    equalTiles();
  });
});

Answer 2

Alternatively to Josh's answer, and more commonly, pass in a function to the jQuery or $ directly.

$(function() {
    // code that runs once the window is ready
});