51

Can you list the difference between onload() and $(document).ready(function(){..}) functions in the using jQuery?

George Garchagudashvili
  • 6,657
  • 12
  • 39
  • 53
Venkat
  • 18,946
  • 25
  • 71
  • 83
  • nice discussion here from SO itself http://stackoverflow.com/questions/3474037/window-onload-vs-body-onload-vs-document-onready http://stackoverflow.com/questions/191157/window-onload-vs-body-onload – kobe Dec 09 '10 at 07:23

6 Answers6

72

the load event (a.k.a "onload") on the window and/or body element will fire once all the content of the page has been loaded -- this includes all images, scripts, etc... everything.

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

Lee
  • 13,034
  • 1
  • 26
  • 45
  • 3
    if Lee's explaination is not clear enough for you, have a look at this define: http://www.codedigest.com/FAQ/40-What-is-the-difference-between-Body-OnLoad-and-jQuery-document-ready%28%29-Event-.aspx – angry kiwi Apr 16 '11 at 05:18
  • 1
    Can someone include one scenario when one should use `load` and when to use `document.ready`? – Unbreakable Dec 02 '16 at 21:09
  • 2
    @Unbreakable - if your script only needs to manipulate elements (add items dynamically to a div, set event listeners, etc.) you can do that in document.ready, which runs as soon as the *DOM* is fully loaded. If you want to do things that affect images (e.g., make calculations on .width() and .height(), etc.) and other secondary resources you should use window.onload. And take note of Bhanu Prakash Pandey's answer, that you can only have one onload (where you'd have to put everything you need done) but you can have multiple document.ready calls on the same page. – Dan Barron Feb 08 '17 at 14:39
  • @Unbreakable and for future audience in case you are working with images or videos width or height you need to use window.onload otherwise it is very simple just use document.ready. If you need more details you can read this article: [link](https://aspsqltutorials.blogspot.com/2012/08/difference-between-document-ready-and-window-onload.html) – Aamerallous Feb 22 '21 at 18:38
19

The main differences between the two are:

  1. Body.Onload() event will be called only after the DOM and associated resources like images got loaded, but jQuery's document.ready() event will be called once the DOM is loaded i.e., it wont wait for the resources like images to get loaded. Hence, the functions in jQuery's ready event will get executed once the HTML structure is loaded without waiting for the resources.
  2. We can have multiple document.ready() in a page but Body.Onload() event cannot.
Bhanu Prakash Pandey
  • 3,697
  • 1
  • 21
  • 15
2

Document.ready() function triggers as soon as HTML DOM loaded. But the onload() function will trigger after HTML DOM, all the body content like images loaded.

user5755278
  • 21
  • 1
1

body.onload() cares about both HTML structure and assoicated resources where as document.ready() cares only about the HTML structure.

sridiva
  • 11
  • 1
0

Onload take care about DOM and resources: it checks if images are loaded, script are ready to run and much more.

$.ready simply check if we have read the full DOM of the page.

Please check out this link for more explain and example: http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

Daniele Petrarolo
  • 420
  • 4
  • 8
0

onload() fires when all the content (everything) on the targeted eleement is fully loaded like CSS, images etc.

$.ready indicates that code in it need to be executed once the targeted elements content loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.

.

Ex(body onload):

<body onload="loadBody()">

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body

Ex(onload on an element):

<img src="w3html.gif" onload="loadImg()" width="100" height="132">

<script>
function loadImg() {
    alert("Image is loaded");
}
</script>

Ex3 ($.ready):

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>
Srikrushna
  • 2,652
  • 30
  • 37