Children's shoes with JavaScript, should know the Window object and document object, also should have heard of the Load event and ready event, the side dishes of course also know, and think very understand, until recently a problem, only to know that things are not so simple.
First of all, window and document, visually, window represents the browser window, while document represents the DOM element loaded in the browser window, further, document is a property of window, and window is the top-level object.
What difference does it have? Well understood, suppose that there is now a browser, inside the loaded page is particularly long, has exceeded a screen, of course, there will be a scroll bar, this time, $ (window). Height () and $ (document). Height () is not equal, The document is definitely taller than window because window windows are always that big. See figure below:
again, the Load event and the Ready event (The load and ready here refer to the jquery event, below).
First of all, the Load,load event is used to replace the native window.onload, which can only be used in two scenarios:
· Window object. such as $ (window). Load (FN);.
· Elements with URLs (images, scripts, frames, iframes). such as $ ("img"). Load (FN);.
In addition, none of the elements have a load event, such as: $ (document). Load (FN); This is the wrong writing and will not be executed at all.
The Load event requires a full load of the page to be completed before it can be triggered, the so-called full load, not only the DOM structure loaded, but also all the link references are loaded to complete. For example, there are a large number of pictures on the page, you must wait for each picture is loaded to complete, just call complete loading.
The most important thing is not to say, the jquery official documentation clearly describes the cross browser compatibility of the Load event (it doesn ' t work consistently nor reliably cross-browser). After a vegetable test, Google Browser only supports $ (window). Load (FN);, while Firefox browser supports $ (window). Load (fn); and $ ("img"). Load (FN);
Therefore, the use of the Load event is strongly deprecated unless necessary.
Finally, the Ready,ready event can be added to any element, such as $ (window). Ready (FN);, $ (document). Ready (FN);, $ ("div"). Ready (FN);
The ready event does not require that the page be completely loaded, only to be triggered by loading the DOM structure.
Ready events can be registered multiple at the same time, executed in accordance with the order of registration. Note that even registering ready events with different elements is performed sequentially. For example, the following code:
According to Common sense, the div should be loaded first, so first execute alert ("div"), then alert ("Document"), or alert ("window"), but unfortunately, alert ("div"), is the last one to execute. Therefore, whether or not registering ready events on the same element is performed in the order in which they are registered.
Finally, the ready event is in conflict with window.onload (or <body onload= ">") if Window.onload (or <body onload= "" >) is used, Will cause the ready event to not execute.
After so much discussion, it turned out to be: $ (document). Ready (FN); compatibility, security is the best, if you have such requirements, try to use this approach.
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
