Difference between $(window).load() and $(document).ready() functions

The $(window).load() is NOT available in jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

To get around it, you can use it as an "Event Handler Attachment"

$( window ).on("load", function() {
        // Handler for .load() called.
});

The difference are:

$(document).ready(function() { is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.

$(window).load() event is fired after whole content is loaded.


$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

  • document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all content.
  • window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded, so if you're using image dimensions for example, you often want to use this instead.

Tags:

Jquery