Difference between onload () and $ .ready?

Question

Can you tell the difference between the onload() and $(document).ready(function(){..}) when using jQuery?

Answer 1

the load event (aka "onload") in the window and / or body element will fire after loading the entire contents of the page - this includes all images, scripts, etc. .... everything.

In contrast, the jquery $(document).ready(...) function will use a browser-specific mechanism to ensure that your handler is called as soon as possible after loading and accessing HTML / XML. This is the earliest moment in the process of loading the page where you can safely run a script that intends to access the elements on the html dom page. This point arrives earlier (often much earlier) than the final load event, due to the extra time required to load secondary resources (such as images, etc.).

Answer 2

The main differences between them:

• The Body.Onload () event will be raised only after the DOM and related resources such as images are loaded, but the jQuery document.ready () event will be raised after the DOM is loaded, i.e. he will not wait for resources such as images to download. Therefore, functions in the jQuery ready event will execute after loading the HTML structure, without waiting for resources.
• We can have several document.ready () on the page, but the Body.Onload () event cannot.

Answer 3

• A page can have more than one document.ready() function, where we can have only one onload function.

• The document.ready () function is called as soon as the DOM is loaded where the body.onload() function is body.onload() , when everything is loaded on a page that includes the DOM, images, and all related resources of this page.

Answer 4

Function

document.ready() differs from the body onload() function for two reasons.

• There can be more than one document.ready() function on a page, where we can have only one onload body function. Function
• document.ready() is called as soon as the DOM is loaded where the body.onload() function is body.onload() , when everything is loaded onto a page containing the DOM, images, and all related resources of this page.

Answer 5

The Document.ready () function runs as soon as the HTML DOM is loaded. But the onload () function is called after the HTML DOM, the entire contents of the body are like loaded images.

Answer 6

body.onload () takes care of both the HTML structure and additional resources, where document.ready () only takes care of the HTML structure.

Answer 7

Onload takes care of the DOM and resources: it checks to see if the images are loaded, the script is ready to run, and much more.

$. ready to just check if we read the full DOM page.

Please see this link for a more detailed explanation and example: http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery/