jQuery - What are differences between $(document).ready and $(window).load?

Question

What are differences between

$(document).ready(function(){  //my code here }); 

and

$(window).load(function(){   //my code here }); 

---

And I want to make sure that:

$(document).ready(function(){  })  

and

$(function(){  });  

and

jQuery(document).ready(function(){  }); 

are the same.

Can you tell me what differences and similarities between them?

Answer 1

$(document).ready(function() {    // executes when HTML-Document is loaded and DOM is ready    console.log("document is ready");  });      $(window).load(function() {    // executes when complete page is fully loaded, including all frames, objects and images    console.log("window is loaded");  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Query 3.0 version

Breaking change: .load(), .unload(), and .error() removed

These methods are shortcuts for event operations, but had several API limitations. The event .load() method conflicted with the ajax .load() method. The .error() method could not be used with window.onerror because of the way the DOM method is defined. If you need to attach events by these names, use the .on() method, e.g. change $("img").load(fn) to $(img).on("load", fn).¹

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

Should be changed to

$(window).on('load', function (e) {}) 

These are all equivalent:

$(function(){ });   jQuery(document).ready(function(){ });  $(document).ready(function(){ });  $(document).on('ready', function(){ })