Home > Developer > JavaScript
When adding special effects to a webpage, you often need to add the "onload" event to the <body>, that is, execute an event after the webpage is loaded. For example: <body onload = "alert ('Welcome! ') ", But this has a major defect. The event will be executed after the webpage is completely downloaded, including images or Flash in the webpage, if the images on the Web page are large or contain many images, you may not be able to wait until the web page has been completely downloaded and the user has clicked to link to another web page. In this case, this event has not been executed. In addition, the body parameter of the webpage may not be modified in some special circumstances. For example, when posting an article on another website or using the CMS whole site system.
At this time, we will think of using "window. onload "or" document. body. onload to replace the onload event in the <body>. Indeed, the problem is solved, but some problems may occur when loading multiple onload events or controlling the order of addition, after I found the addLoadEvent () function written by "Paul Koch", all the problems were solved. If you must use "window. onload "or" document. body. onload to replace the onload event in <body>. We recommend that you use the former, which is invalid in Firefox, that is, there is a compatibility problem.
JavaScript code
Copy codeThe Code is as follows:
Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
Call method:
Copy codeThe Code is as follows:
AddLoadEvent (wwwjb51 ());
// Or
AddLoadEvent (function (){
Document. body. style. backgroundColor = 'yellow ';
Jb51 ();
});
DEMO code:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> addLoadEvent () test </title> </pead> <body> <p> Here goes... </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
We recommend that you use the addLoadEvent () function to replace the onload event in <body>. AddLoadEvent () custom code comes from: http://www.simonwillison.net/2004/May/26/addLoadEvent/
AddLoadEvent workflow:
Store the values of the existing window. onload event handler function to the variable oldonload.
If no function is bound to this processing function, add the new function to it as usual;
If some functions have been bound to this processing function, the function will be traced back to the end of the existing command.
The browser loads html content from top to bottom (default), while Javascript is generally introduced-think about it if Javascript contains some instant execution instructions,
It does not have any element node (because it has not been loaded). What are the consequences? The result is an error.
AddLoadEvent can bind multiple functions to the window. onload event at the same time.
Onload event ----- addLoadEvent Function
Copy codeThe Code is as follows:
Window. onload = myfunction ();
Suppose we want a function to be executed immediately after the webpage is loaded. An onload event is triggered when the webpage is loaded, so we can use the onload event to load this function. The Onload event is associated with the window object. For example:
Bind the myfunction to this event:
We can use the above solution for a function. What about two, three, or more? How can this problem be solved ??
If we have two functions: firstFunction and secondFunction, is it written as follows:
Copy codeThe Code is as follows:
Window. onload = firstFunction;
Window. onload = secondFunction;
However, each processing function can only bind one instruction. So none of the above. Because the secondFunction will replace the firstFunction function.
There is a way to help us solve the above problem: we first create an anonymous function to accommodate the two functions, and then bind the anonymous function to the onload event, as shown below:
Copy codeThe Code is as follows:
Window. onload = function (){
FirstFunction ();
SecondFunction ();
}
This is indeed a good and simple answer.
But there is still an optimal solution-no matter how many functions you want to execute after page loading, you can easily implement this function.
This function is named addLoadEvent. This function has only one parameter: this parameter specifies the name of the function to be executed after the page is loaded.
The addLoadEvent () function code is as follows:
Copy codeThe Code is as follows:
Function addLoadEvent (func ){
Var oldonLoad = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
}
Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
The addLoadEvent function performs the following operations:
1. Store the values of the existing window. onload event handler function to oldonload.
2. If no function is bound to the handler, add the function to it.
3. If some functions have been bound to this handler function, append the function to the end of the existing one.
Through the addLoadEvent function, you only need to call this function to bind it.
Copy codeThe Code is as follows:
AddLoadEvent (firestFunction );
AddLoadEvent (secondFunction );
So this function is very useful, especially when the Code becomes very complex. No matter how many functions you want to execute when the page is loaded, you only need to write a few more statements. Convenient and practical.
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
