Solve JS window.onload event with the page more load problem

Source: Internet
Author: User

Window.onload usage is as follows:

The code is as follows Copy Code

function func () {alert ("This is window onload event!"); return;}

Window.onload=func;

Or as follows:

Window.onload=function () {alert ("This is window onload event!"); return;}

However, window.onload cannot load multiple functions at the same time.

Like what:

The code is as follows Copy Code

function T () {
Alert ("T")
}
Function B () {
Alert ("B")
}
Window.onload =t;
Window.onload =b;

The previous overlay will be followed, and the above code will only output B.

There are three ways to solve this problem

1. Write the event you want to bind, and then assign the onload

The code is as follows Copy Code

Window.onload=function () {function1 (); function2 ();}

2, through the custom addloadevent to solve

The code is as follows Copy Code

function Addloadevent (func) {
var oldonload=window.onload;
if (typeof window.onload!= ' function ') {
Window.onload=func;
}else{
Window.onload=function () {
Oldonload ();
Func ();
}
}
}
To add an event to load execution:

Addloadevent (FUNC1);
Addloadevent (FUNC2);

3, if you want to give an event in your program to assign a number of processes, as long as the first judge the browser, and then according to different browsers, choose to use Attachevent or addeventlistener on it. Examples are as follows

The code is as follows Copy Code
if (document.all) {
Window.attachevent (' onload ', func1);
Window.attachevent (' onload ', FUNC2);
} else {
Window.addeventlistener (' Load ', func1, false);
Window.addeventlistener (' Load ', FUNC2, false);
}


4. Custom function Multiple calls

  code is as follows copy code
<script Type= "Text/javascript"
Function func1 () {...}
Function Func2 () {...}
Function func3 () {...}
Function Addloadevent (func) {
var oldonload=window.onload;
if (typeof window.onload!= "function") {
 window.onload=func;
 }
else{
 window.onload=function () {
Oldonload ();
func ();
}
 }
 }
 addloadevent (FUNC1);
 addloadevent (FUNC2);
 addloadevent (FUNC3);
</script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.