First of all, window and document, visually speaking, window represents the browser window, and document represents the DOM element loaded in the browser window, further said that the document is a Window property, window is the most top-level object.
What's the difference between them? Well understood, assuming there is now a browser, the page loaded in a particularly long, has exceeded a screen, of course, there will certainly be a scroll bar, at this time, $ (window). Height () and $ (document). Height () is not equal, The document's height is certainly greater than the window, because it's always that big.
Besides, the load and ready events ( here the load and ready are the events of jquery , the same below).
First of all, the Load,load event is mainly used to replace the native window.onload, which can only be used in two scenarios:
· The Window object. such as $ (window). Load (FN);.
· Elements with URLs (images, scripts, frames, iframes). such as $ ("img"). Load (FN);.
In addition, there is no load event for any element, such as $ (document). Load (FN); this is a wrong notation and will not be executed at all.
The Load event requires the page to be fully loaded before it can be triggered, so the so-called fully loaded, not just the DOM structure is loaded, but also all the link references will be loaded. For example, the page has a large number of images, must wait for each picture to be loaded complete, just called completely loaded.
Most importantly, the official jquery document clearly illustrates the poor cross-browser compatibility of the Load event (It doesn ' t work consistently nor reliably cross-browser). After a side dish test, Google Chrome only supports $ (window). Load (FN), while Firefox supports $ (window). Load (fn); and $ ("img"). Load (FN);
Therefore, the use of the Load event is strongly not recommended unless necessary.
Finally, say that the Ready,ready event can be added to any element, such as $ (window). Ready (FN);, $ (*. Ready (FN);, $ ("div"). Ready (FN), and so on.
The ready event does not require that the page be fully loaded, only the DOM structure is loaded to trigger.
The ready event can be registered multiple at the same time and executed in the order in which it was registered. Note that even the ready events that register different elements are executed in sequence.
For example, the following code:
$ (window). Ready (function () {Alert ("window");}); $ (document). Ready (function () {alert ("document");}); $ ("div"). Ready (function () {alert ("div");});650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px Border:none; "/> In common sense , should be div first loaded, so first execute alert (" div "), and then the alert (" document "), or alert (" window "), but unfortunately, alert ( "Div"); is the last one to execute. Therefore, regardless of whether the ready event is registered on the same element, it is executed in the order in which it was registered.
Last item, Ready event with window. Onload= "" >) is a conflict if window is used. Onload= "" >) will cause the ready event to not execute.
After so much discussion, the final proof:$ (document). Ready (FN), compatibility, security is the best, if there is such a requirement, try to use this way.
JS Event
Window.onload must wait until all the elements of the page that include the picture have been loaded before they can be executed.
window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one is executed;
window.onload does not simplify the wording
$ (document). Ready (function () {}) can be simply written as $ (function () {});
No body. Onload () Reason 1:
If we want to load multiple functions at the same time, we have to write this
<body onload= "fn1 (), fn2 ()" ></body> looks extremely ugly if used with $ (window). Load () We can load multiple functions like this
$ (window). Load (function () {
Alert ("Hello, I am jquery!");
});
$ (window). Load (function () {
Alert ("Hello, I am also jquery");
});
It will execute the two functions from the top down and look much prettier.
No body. Onload () Reason 2:
With body. Onload () is not able to achieve the full separation of JS and HTML, this is a very serious problem.
Also use $ (window). Load (function () {...}) and Body.onload () have the same problem, because at the beginning, they all need to wait until everything on the page
Load is done, but if the speed is slow, loading a page often takes a long time (a few seconds to more than 10 seconds, or even longer ...), so we often
Will encounter the page has not been fully loaded and the user is already on the action page this situation, so that the effect of the page is not as we expected the effect of the same,
So here I recommend the use of $ (document). Ready (function () {}), or abbreviated as $ (function () {}), because he will execute when the DOM element of the page is loaded,
This article is from "front end or back end" blog, declined reprint!
$ (document). Ready (), window.onload, body. Onload (), $ (window). The difference between load and image.onload
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
