When adding special effects to the Web page, you often add the "onload" event in <body> to perform an event after the page is loaded, for example: <body onload= "alert (' Welcome! ')" But there is a big flaw in doing so, The event will be completed after the full download of the Web page will be executed, including the Web page in the picture or flash, and so on, if the picture on the page is larger or there are many pictures, may not have such a full download of the Web page has been clicked links to other pages, so this event has not been In addition, in some special cases, the body parameters of the Web page may not be modified. If you are publishing an article on someone else's website, or when you use a CMS whole station system.
At this time we will think of "window.onload" or "document.body.onload" to replace the onload incident in <body>, indeed, the problem solved, However, there are also problems when loading multiple onload events or control order, until I find the Addloadevent () function written by Paul Koch, all the problems are resolved. If you must use "window.onload" or "document.body.onload" to replace the onload events in <body>, we recommend that the former, Firefox browser is not valid, that is, compatibility problems.
JavaScript code
Copy Code code 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 Code code as follows:
Addloadevent (wwwjb51 ());
Or
Addloadevent (function () {
Document.body.style.backgroundColor = ' yellow ';
Jb51 ();
});
Demo Code:
<textarea id="runcode31026"><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & Lt;meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title>addloadevent () test</title> <script type=" Text/javascript "> function Addloadevent (func) {var oldonload = window.onload; if (typeof window.onload!= ' function ') {window.onload = func; else {window.onload = function () {oldonload (); Func (); }} addloadevent (function () {Document.body.style.backgroundColor = ' yellow '; Set background color}) addloadevent (function () {Document.body.appendChild (document.createTextNode (' cloud-dwelling Community ')) }) Addloadevent (function () {Document.body.appendChild (document.createTextNode (' www.jb51.net '));; }) </script> </pead> <body> <p>here goes...</p> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
We recommend that you use the addloadevent () function to replace <body> to add the "onload" event. Addloadevent () Custom code comes from: http://www.simonwillison.net/2004/May/26/addLoadEvent/
addloadevent Work Flow:
The value of the existing Window.onload event handler is stored in the variable oldonload.
If you have not yet bound any function on this handler, add the new function to it as usual;
If a function is already bound in this handler, the function is recovered to the existing instruction.
Browser load HTML content is Top-down (default), and JS is generally where to introduce-think if JS contains some immediate execution instructions,
It will operate without the presence of element nodes (as they have not yet been loaded). The result is an error.
Addloadevent can implement no matter how many functions you have, you can bind them to the Window.onload event at the same time.
OnLoad Event-----addloadevent function
Copy Code code as follows:
Window.onload = MyFunction ();
If we want a function to execute immediately after the Web page has finished loading. The onload event is triggered when the Web page is loaded, so we can use the OnLoad event to load the function. The onload event is associated with a Window object. Such as:
Bind the MyFunction function to this event:
A function we can use to solve the above, those two, three or more? How to solve??
If we had firstfunction and secondfunction two functions, would that be the following:
Copy Code code as follows:
Window.onload = firstfunction;
Window.onload = secondfunction;
However, each handler function can only bind one instruction. So the top doesn't work. Because the Secondfunction function will replace the firstfunction function.
One way to help us solve the problem is to create an anonymous function to hold the two functions, and then bind that anonymous function to the OnLoad event, as follows:
Copy Code code as follows:
Window.onload = function () {
Firstfunction ();
Secondfunction ();
}
This is really a good, simple way to answer.
But there's still one best solution-no matter how many functions you plan to perform after the page is loaded, it's easy to implement with that function.
The function is named Addloadevent. The function has only one parameter: This parameter specifies the function name of the function you intend to perform after the page is loaded.
The Addloadevent () function code is as follows:
Copy Code code 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 basically completes the following operations:
1. The value of the existing Window.onload event processing function is deposited into the oldonload.
2. If you have not yet bound any function on this handler, add the function to it.
3. If you have already bound some functions on this handler, append the function to the end of the existing specified.
With the Addloadevent function, you can bind by simply calling the function.
Copy Code code 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 intend to perform when the page is loaded, just write a few more of these statements to resolve. Convenient and practical.
