Home > Developer > JavaScript
Excerpted from http://blog.csdn.net/kk5595/article/details/5713209
Page loading completed there are two kinds of events, one is ready, indicating that the document structure has been loaded complete (not including pictures and other non-text media files), the second is onload, indicating that the page contains pictures and other files, all elements are loaded complete. (Can say: ready to load before onload!!!) )
My understanding: The General style control, the chip size control placed in the onload loaded;
and: JS Event Trigger method, can be loaded in ready;
A lot of people who use JQ have started writing scripts like this:
$ (function () {
Do something
});
In fact, this is the abbreviation of JQ Ready (), which is equivalent to:
$ (document). Ready (function ()
{
Do something
})
Or the following method, the default parameter of Jquer is: "Document";
$ (). Ready (function () {
Do something
})
-------------------------------------------------------------------------------------------------- ---------------------------------------------
$ (document). The Ready () method vs OnLoad event vs $ (window). Load () method
The first thing you'll learn when contacting jquery is when to start an event. For a long time, events that were raised after loading the page were loaded into the "Body" onload event. There are a number of drawbacks to the body onload event compared to jquery's Ready method. For example:
1. Problems with loading multiple functions
<body onload= "A (); B ();" >
</body>
This can only be loaded in the OnLoad event, very ugly ... In jquery, you can take advantage of multiple jquery.ready () methods, which are executed sequentially in order
2. Code and content are not separated
This seems to be needless to say, it is repugnant to people-.-!!
3. Different execution sequence
For the Body.onload event, it is loaded all the page content before it will be triggered, I mean all content, including pictures, flash, etc. if a lot of these contents of the page will make the user wait for a long time.
For the $ (document). Ready () method, this method is only triggered when all the DOM of the page has been loaded, which undoubtedly speeds up the Web page greatly.
But for some special applications, the magnification of the film is reduced, and the picture is cropped. Need to load all the content of the Web page before executing it? I recommend using the $ (window). Load () method, which will wait until all the pages have been loaded and not be triggered without the drawbacks of the onload event.
<script type= "Text/javascript" >
$ (window). Load (function () {
Alert ("Hello");
});
$ (window). Load (function () {
Alert ("Hello Again");
});
</script>
The code above will be executed sequentially after all the page contents have been loaded.
Of course, don't forget the corresponding unload method.
$ (window). Unload (function () {
Alert ("Good Bye");
});
The above code is raised when the page is closed.
Throw JS code before all DOM loads this method is my favorite when debugging, sometimes it is used in the development of this method
<body>
<script type= "Text/javascript" >
(function () {
Alert ("HI");
}) (JQuery)
</script>
</body>
Right, is to use the form of JS closure to embed the JS code body, this code will be automatically executed, of course, you can embed the JS code directly, this way to pay attention to the sequence of problems, as follows:
<body>
<div id= "Test" >this is the content</div>
<script type= "Text/javascript" >
Alert ($ ("#test"). html ());//i Can Display the content
</script>
</body>
<body>
<script type= "Text/javascript" >
Alert ($ ("#test"). html ());//i Can ' t display the content
</script>
<div id= "Test" >this is the content</div>
</body>
The first two pieces of code, in the second code, because only the DOM before the current code can be interpreted, and test does not exist in the parsed DOM number. So the second piece of code does not display correctly.
The difference between Document.ready and onload--javascript document load completion event
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
