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

Question

I need to learn more about the differences between pageLoad, onload and $ (document) .ready ()

I found the answer, but this is not clear to me. the answer is similar

The finished event occurs after the HTML document is loaded, while the onload event occurs later, when all content (for example, images) is also loaded.

The onload event is a standard event in the DOM, and the finished event is specific to jQuery. The goal of the finished event is that it should appear as soon as possible after loading the document, so that code that adds functionality to the page elements does not have to wait for the entire content to load.

A person trying to say that a finished event occurs after loading an HTML document and an onload event occurs after loading all page elements, such as an image, etc.

So what is loading an HTML document? I know that loading an HTML document means that the full loading of the page element is complete.

What does dom mean ready or loaded? What is the difference between loading an HTML document and loading a dom? Please let me understand an example. Thanks

Answer 1

I don't know what you mean by the Load page, but here is some information about onload and $(document).ready() .

window.onload triggered when the download on the page is completed. This means that not only the entire DOM is loaded, but all related resources, such as images, are fully loaded. Since this is waiting for the image processing to complete, it can sometimes take a long time to start window.onload . If you really don't need to wait for the images to finish loading, you usually do not expect this for long to start launching your javascript that changes the page or intercepts event handlers, etc.

$(document).ready() is a jQuery-specific event that fires as soon as the DOM is ready to process, but potentially well before the images finish loading. This happens after all the objects present on the HTML page have been parsed and initialized by the browser and after all the scripts on the page have been loaded. At the time of this event, it is safe to modify the DOM in all browsers. This may even happen somewhat earlier or later in some browsers, as the detection mechanism when the DOM is safely loaded varies between older and newer browsers.

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

Both of these events will fire only once per page.

Answer 2

Draw an analogy to compare the process of loading a web page to a chef with a recipe:

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

As the chef continues to read, he sends his assistant to the pantry to get ingredients, utensils and appliances (download other files from the server). When he finishes reading the recipe ( $(document).ready() ), he begins to follow the steps (displays the page), but sometimes he reaches a step before his assistant returns with the necessary materials to complete this step. He is quite experienced, so he is still able to complete the later steps while he waits. (The analogy breaks down a bit here, but basically: the browser displays the page in the same way that it can be based on HTML when you see the page load, and then the fonts or layout change after a couple of seconds because finally got the stylesheet ... just imagine that this chef can somehow add eggs to a cake that is already in the oven.)

It is only after the assistant chef brought everything that is indicated in the recipe back to the kitchen (the browser downloaded all the contents) that the chef can put the finished meal on a plate and decorate it (run the onload code).

---

The onload event is a standard event in the DOM, and the finished event is specific to jQuery.

The DOM is a document object model, the basic component of normal JavaScript. This means that all modern web browsers already know what onload means.

jQuery is a widely used JavaScript library. For your script to use $(document).ready() correctly, you will have to reference a copy of the jQuery library. Browsers do not know what $(document).ready() means without jQuery.