document.ready vs window.onload

Harish Sahoo

7y1.6k

what is the difference between the above ?

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bidyasagar Mishra7y ago
Accepted answer
$(doccument).ready(function(){}); :- It invokes when all the HTML element loaded to the page.
window.onload(); :- It invokes after the whole page loaded to the DOM.
+3
wale mark6y ago
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The key difference between $(document).ready() and $(window).load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document).ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
http://net-informations.com/jq/iq/onload.htm
+2
Harsh Shah7y ago
The Ready event occurs after the HTML Document has been loaded and while the onload which is the standard event in DOM occurs later, when all content also has been loaded.

In JavaScript window is one of core object and defines several useful events e.g. onload, before jQuery comes, if want to execute any code, once DOM is loaded completely, we use window.onload event. We define code like:

Window.onload = function(){
//code supposed to run once DOM is loaded
alert("onload event is fired");
};

There is problem with this code, it not exactly when DOM is loaded but it executes after all content including big images are loaded completely. Browser normally delay executing onload code, until all page content is loaded, because of this user can see significant delay between they first see the page and the time that code inside onload get executed this delay is particularly notable, if your page content heavy images, flash videos or other heavy content.

jQuery solves this problem by introducing ready event, you might have seen code like below in several JavaScript files or HTML pages :

$(document).ready(function() {
alert("This is Jquery ready method.")
});
+2
Rajanikant Hawaldar7y ago
Hi harish, The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded. The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load. Go through below link it contains discussion on this https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready https://www.c-sharpcorner.com/interview-question/difference-between-windowonload-and-documentredy https://www.dotnettricks.com/learn/aspnet/difference-between-documentready-and-windowonload-or-pageload https://www.codeproject.com/Tips/632672/JavaScripts-document-ready-vs-window-load
+3
Abhijeet Jadhav7y ago
Ready event is specific to jQuery while "onload" event is standard event in DOM.

Ready event provides an option to add functionality to elements in the page as soon as document is loaded even dont have to wait untill all the contents on the page is loaded.
+3