As we write JavaScript code, we begin to write this:
function () { // Write code }I don't know why it's written like this, and I'm going to write about it when I look at someone else. Today I would like to say briefly: when it comes to onload, we want to speak the order of HTML execution. The order in which the HTML is executed is top to bottom, unless you specifically specify that JavaScript will not wait until the page load has finished loading.
For example, there is a line of code in the Web page
<id= "name">My name is Aaron</p>
If you add the following JavaScript code before this line of code:
<script type= "Text/javascript" > document.getElementById ("name"). InnerHTML = "Shangao"; </script>Run the page, with Firebug you can see this error message:
The reason is that when the JavaScript code is executed, there is no DOM element with the ID name on the page.
There are two ways to resolve this:
1. Put the JavaScript code behind the HTML code:
<PID= "Name">My name is Aaron.</P><Scripttype= "Text/javascript">
document.getElementById ("name"). InnerHTML="Shangao";</Script>
2. After the Web page has finished loading, execute the JavaScript code. The traditional method is what I said at the beginning, using Window.onload, the code is as follows:
<Scripttype= "Text/javascript">window.onload= function() {document.getElementById ("name"). InnerHTML="Shangao"; } </Script></Head><Body> <PID= "Name">My name is Aaron.</P></Body>
There is also the ability to use jquery to accomplish this:
<Scripttype= "Text/javascript">$ (document). Ready (function() {document.getElementById ("name"). InnerHTML="Shangao"; }); </Script></Head><Body> <PID= "Name">My name is Aaron.</P></Body>
Here we talk about Window.onload and $ (document). The difference between ready ():
1. The difference in execution time:
Window.onload must wait until all the elements of the page content including the picture have been loaded before they can be executed.
$ (document). Ready () is executed when the DOM structure is drawn and does not have to wait for the load to complete.
The code demonstrates the following:
<Scripttype= "Text/javascript"src= "Js/jquery-1.11.0.min.js"></Script> <Scripttype= "Text/javascript">window.onload= function () {Alert (" First"); } $ (document). Ready (function() {alert ("Second"); }); </Script>
We will see a pop-up box with "second" pop-up, and click OK to eject the popup with "first".
It is also important to note that due to the events registered within the $ (document). Ready () method, as long as the DOM structure is in place, it is possible that the associated file for the element is not yet downloaded. For example, the image-related HTML download is complete, and has been parsed into the DOM tree, but it is possible that the picture has not been loaded, so the height and width of the sample is not necessarily valid at this time. To solve this problem, you can use another method in Jquery about page loading---the load () method. The Load () method binds a handler function in the OnLoad event of the element. If the handler is bound to a Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the handler is bound to the element, it is triggered after the element's contents have been loaded.
The jquery code is as follows: $ (window). Load (function() {// Write code function () { // write code }2. Different writing numbers
Window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one is executed.
$ (document). Ready () can be written multiple at the same time and can be executed.
The code demonstrates the following:
<Scripttype= "Text/javascript"src= "Js/jquery-1.11.0.min.js"></Script> <Scripttype= "Text/javascript">window.onload= function () {Alert ("First window.onload"); } window.onload= function() {alert ("Second Window.onload")} $ (document). Ready (function() {alert ("First $ (document). Ready ()"); }); $ (document). Ready (function() {alert ("second $ (document). Ready ()"); }); </Script>
We can see that the "first $ (document)" is popped up. Ready (), second $ (document). Ready (), second window.onload three pop-up boxes. It is also possible to see that their execution time is different.
3. Simplified wording:
Window.onload is not a simplified notation, $ (document). Ready (function () {}); can be simply written as $ (function () {});
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
