difference between pageLoad , onload & $(document).ready()

Question

i need to know in more detail of what is the differences between pageLoad , onload & $(document).ready()

I found answer but that is not ver clear to me. the answer is like

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 funcionality to the elements in the page doesn't have to wait for all content to load.

the person trying to say ready event occurs after the HTML document has been loaded and onload event occur after all page element like image etc being loaded.

So what is HTML document load? I know HTML document load means all page element load complete.

What does mean like dom is ready or loaded? What is the difference between HTML document load & dom load? Please make me understand with example. Thanks

Answer 1

I don't know what you mean by pageLoad, but here's some info on onload and $(document).ready().

window.onload fires when everything in the page has finished loading. That means that not only the entire DOM is loaded, but any linked resources such as images are fully loaded. Because this waits for images to finish loading, it can sometimes take a long time to fire window.onload. Unless you really need to wait until images are finished loading, you do not generally want to wait this long to start running your javascript that modifies the page or hooks up event handlers, etc...

$(document).ready() is a jQuery-specific event that fires as soon as the DOM is ready for manipulation, but potentially long before images have finished loading. This occurs after all objects present in the page HTML have been parsed and initialized by the browser and after all scripts in the page have been loaded. At the moment of this event, it is safe to modify the DOM in all browsers. This even may occur a little earlier or later in some browsers as the mechanism for detecting when the DOM is safely loaded varies between older and newer browsers.

The jQuery 1.6.x implementation for $(document).ready() uses a number of different detection mechanisms for when the DOM is ready. The preferred method is when the DOMContentLoaded event triggers on the document object. But, this event is only supported by some browsers so it has fallback mechanisms for other browsers.

Both of these events will fire only once per page.