What is the difference between Window.load and document.readyState

Question

Hi All,

I have one question , In my ASP.NET MVC web application i have to do certain validation once page and all controls got loaded.

In javascript i was using belwow line of code for calling a method.

window.load = JavascriptFunctionName ; 

Some one from my team asked me not used above line of code Instead use JQuery to do the same

 document.attachEvent("onreadystatechange", function() {
        if (document.readyState === "complete") {
            CheckThis();

        }
    });

Please help me in understanding what is the difference between two. When i tested by keeping alert in both Jquery check is executing first and calling the CheckThis function where as window.load is taking some time and executing after it. Please suggest

Answer 1

window.load - This runs when all content is loaded, including images.

document.ready - This runs when the DOM is ready, all the elements are on the page and ready to do, but the images aren't necessarily loaded.

Here's the jQuery way to do document.ready:

$(function() {
  CheckThis();
});

If you wanted to still have it happen on window.load, do this:

$(window).load(function() {
  CheckThis();
});

Answer 2

window.load triggered when your page completely loaded (with images, banners, etc.), but document.readyState triggered when DOM is ready

Answer 3

The ready handler executes as soon as the DOM has been created, without waiting for all external resources to be loaded.

Since you've using jQuery, a more concise, browser agnostic, and widely used syntax for it is:

$(function(){  
   CheckThis();
});