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

Let's have a look on the differences between the two most used events in jQuery - $(document).ready and $(window).load.
Submitted by Pratishtha Saxena, on August 11, 2022

1) jQuery $(document).ready

It is a jQuery event, (An event is something that returns a value or implements a function when an event attached to it is triggered). So, the ready() event is triggered or gets fired when the DOM structure gets ready. Whatever is written inside this event is fired as soon as the webpage's structure is ready.

It works even if all the images, audios, videos, etc. are not loaded but the DOM is ready.

Syntax:

$(document).ready(function() {
 // executes once the DOM is loaded
});

2) jQuery $(window).load

Similar to the ready() event, load() is also an inbuilt jQuery event. But the major difference is that this load() event only gets fired once all the content of the page, i.e., the CSS, images, audios, videos, etc. are loaded. It works only when the page is ready not only by structure but also with the content.

Syntax:

$(window).load(function() {
 // executes when the content is also loaded
});