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

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

• javascript
• jquery

2 Answers 2

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.

Let's draw an analogy to compare the process of loading a web page to a chef with a recipe:

First, the chef (browser) reads the entire recipe (downloads the HTML document), to make sure that he understands the steps (HTML code) and that he knows what ingredients (images), utensils (style sheets), and appliances (external scripts) he will need to have in his kitchen (browser cache).

As the chef continues reading, he sends his assistant to the pantry to get the ingredients, utensils, and appliances (download the other files from the server). When he is finished reading the recipe ($(document).ready()), he starts to follow the steps (display the page), but sometimes he gets to a step before his assistant returns with the necessary materials to complete that step. He's pretty skilled, though, so he's still able to complete the later steps while he waits. (The analogy breaks down just a bit here, but basically: the browser lays out the page as well as it can based on the HTML; when you see a page load and then the fonts or layout change after a couple of seconds because it finally got the style sheet... just imagine that this chef is somehow able to add eggs to a cake that's already in the oven.)

It's only after the chef's assistant has brought everything identified in the recipe back to the kitchen (the browser has loaded all of the content) that the chef can put the completed meal onto the plate and garnish it (run the onload event code).

The onload event is a standard event in the DOM, while the ready event is specific to jQuery.

The DOM is the Document Object Model, a basic component of ordinary JavaScript. This means that all modern web browsers already know what onload means.

jQuery is a widely-used JavaScript library. In order for your script to properly use $(document).ready(), you will have to link to a copy of the jQuery library. Browsers don't know what $(document).ready() means without jQuery.