Home > Developer > JavaScript
Page load complete There are two kinds of events, one is ready, that the document structure has been loaded complete (not including pictures and other non-text media files), the second is the onload, indicating that the page contains pictures and other files, such as all the elements are loaded to complete. (can be said: Ready before the onload loading ...) )
My understanding: General style control, such as picture size control placed in the onload loading;
And: JS Event Trigger method, can be loaded inside the ready;
A lot of people with JQ start writing scripts like this:
$ (function () {
Do something
});
In fact this is the shorthand for 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). Ready () method vs OnLoad event vs $ (window). Load () method
The first thing you learn about jquery is when you start an event. In the past a long time, the page loading after the events are loaded in the "body" of the onload incident.
For the body of the OnLoad event and jquery ready method, there are many drawbacks. For example:
1. Loading multiple functions
<body onload= "A (); B ();" >
</body>
In the onload incident can only be loaded in this way, very ugly ... And in jquery you can take advantage of multiple jquery.ready () methods, which are executed sequentially
2. Code and content are not separated
This seemingly needless to say, let a person detest-.-!!
3. Different order of execution
For body.onload events, it is only after loading all the page content will trigger, I mean all content, including pictures, Flash and so on. If a lot of this content of the page will let the user wait for a long time.
For the $ (document). Ready () method, this method is only triggered when all of the page's Dom is loaded, and it definitely speeds up the page.
But for some special applications, such as zooming in and out, picture clipping. You need to load all the contents of the Web page before you execute it. I recommend using the $ (window). Load () method, which will wait until all the contents of the page have been loaded before triggering, and without the drawbacks of the onload event.
<script type= "Text/javascript" >
$ (window). Load (function () {
Alert ("Hello");
});
$ (window). Load (function () {
Alert ("Hello Again");
});
</script>
The above code executes sequentially after all of the page's contents have been loaded.
Of course, don't forget the Unload method that corresponds with it
$ (window). Unload (function () {
Alert ("Good Bye");
});
The above code is raised when the page closes.
To throw a JS code before all the DOM is loaded
This method is my favorite when debugging, sometimes in the development of this method
<body>
<script type= "Text/javascript" >
(function () {
Alert ("HI");
}) (JQuery)
</script>
</body>
Yes, is the use of JS closure of the form of JS code embedded in the body, this code will automatically execute, of course, you can embed the JS code directly, this way to pay attention to the order of the problem, 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 last two pieces of code, in the second code, because the DOM can only be interpreted before the current code, and test does not exist in the DOM number that has already been resolved. So the second piece of code doesn't display correctly.
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
