Difference between onload() and $.ready?

javascript jquery onload
Venkat picture Venkat · Dec 9, 2010 · Viewed 70k times · Source

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

Answer

Lee picture Lee · Dec 9, 2010

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).

Related questions

iFrame src change event detection?

Assuming I have no control over the content in the iframe, is there any way that I can detect a src change in it via the parent page? Some sort of onload maybe? My last resort is to do a 1 …

Read More
Trying to fire the onload event on script tag

I'm trying to load a set of scripts in order, but the onload event isn't firing for me. var scripts = [ '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js', '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/…

Read More
Can I call $(document).ready() to re-activate all on load event handlers?

Does anyone happen to know IF and HOW I could re-call all on-load event handlers? I'm referencing some .js files that I DON'T have control over, and these .js libraries do their initialization in $(document).ready(), and unfortunately don't provide …

Read More