Home > Developer > JavaScript
Differences between document and window and load and ready in jQuery: jquerydocument
If you have used JavaScript, you should know the window object and document Object. You should also have heard of the load event and ready event. You also know about the minor food, and you think you are familiar with it, it wasn't that easy to know until something went wrong recently.
First, let's talk about window and document. intuitively, window represents the browser window, while document represents the dom elements loaded in the browser window. Further, document is an attribute of window, window is the top-level object.
What is the difference between the two? It's easy to understand. Assume that there is a browser that loads a particularly long page that exceeds a screen. Of course, the scroll bar will certainly appear. At this time, $ (window ). height () and $ (document ). the height () is not equal, and the document height must be greater than the window, because the window is always so large. See:
Let's talk about the load event and ready event.(Load and ready here refer to jQuery events, the same below ).
The load event is mainly used to replace the native window. onload. It can only be used in two scenarios:
· Window object. For example, $ (window). load (fn );.
· URL elements (images, scripts, frames, iframes ). For example, $ ("img"). load (fn );.
In addition, no element has a load event, such as $ (document). load (fn). This is an incorrect syntax and will not be executed at all.
The load event can be triggered only after the page is fully loaded. The so-called Full loading is not only the dom structure is loaded, but also all the Link References are loaded. For example, if a page contains a large number of images, you must wait until each image is fully loaded.
The most important thing is that jQuery official documentation clearly states that the cross-browser compatibility of the load event is poor (It doesn' t work consistently nor reliably cross-browser ). Google Chrome only supports $ (window ). load (fn); while Firefox supports $ (window ). load (fn); and $ ("img "). load (fn );.
Therefore, the load event is strongly not recommended unless necessary.
Finally, let's talk about ready. The ready event can be added to any element, such as $ (window ). ready (fn);, $ (document ). ready (fn);, $ ("div "). ready (fn); and so on.
The ready event does not require the page to be fully loaded. You only need to load the dom structure to trigger the event.
You can register multiple ready events at the same time. The events are executed in the order of registration. Note that even if the ready events of different elements are registered, they are executed sequentially. For example, the following code:
Copy codeThe Code is as follows:
$ (Window). ready (function (){
Alert ("window ");
});
$ (Document). ready (function (){
Alert ("document ");
});
$ ("Div"). ready (function (){
Alert ("div ");
});
According to common sense, the div should be loaded first, so execute alert ("div"); first, then alert ("document"); or alert ("window ");, unfortunately, alert ("div"); is the last execution. Therefore, whether or not the ready event is registered on the same element, it is executed in the registration order.
Last, the ready event and window. onload (or <body onload = "">) is conflicted. If window is used. onload (or <body onload = "">) will cause the ready event to not be executed.
After so many discussions, it turns out that $ (document). ready (fn); has the best compatibility and security. If you have such requirements, try to use this method.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
