Home > Developer > JavaScript
Execute function after JavaScript page load completes in HTML
When you do a project, you may experience this situation:
A catalog file (menu.jsp) is import into a JSP page, and the OnLoad event is defined in <body> for each page. Then this definition of the Window.onload function may not take effect or the phenomenon of multiple onload coverage.
Some friends would say that using jquery $ (). Ready (function () {}), or (function () {}) in this way, in fact, this function and JavaScript of the OnLoad event is distinguished, then to see their differences:
Their main difference has two points: the timing of the execution
The Window.onload method is not executed until all elements in the Web page, including all associated files of the element, are fully loaded into the browser. The event handler that is registered through the $ (document). Ready () method in jquery can be invoked as long as the DOM is fully ready, such as a picture as long as the tag is complete, without waiting for the picture to load. You can set a picture's width-high properties or styles, and so on. $ (document). The Ready () method can be used multiple times to register a different event handler, and Window.onload can only save a reference to one function at a time, and a multiple-bound function will only overwrite the preceding function.
Let's look at the results of the Window.onload method registering two times on a page:
<span style= "FONT-FAMILY:SIMSUN;FONT-SIZE:14PX;" >function One () {
alert ("one");
}
function two () {
alert ("two");
}
Window.onload = two;
Window.onload = one;
</span>When the above code is run, "one" pops up.
Take a look at $ (document) again. After the code on the re runs, it pops up "one" and "two" respectively.
<span style= "FONT-FAMILY:SIMSUN;FONT-SIZE:14PX;" >function One () {
alert ("one");
}
function two () {
alert ("two");
}
$ (document). Ready (function () {one
();
});
$ (document). Ready (function () {
two ();
}); </span>When the above code runs, it pops up "one" and "two" respectively.
Well, the comparison is over, which means that the window.onload and jquery methods are not implemented, so there is the following implementation:
<span style= "FONT-FAMILY:SIMSUN;FONT-SIZE:14PX;" >var $ = function (func) {
if (document.addeventlistener) {
window.addeventlistener ("Load", Func, false); c13/>}
else if (document.attachevent) {
window.attachevent ("onload", Func);
}
$ (function () {show
();
}) </span>As long as this is used:
$$ (function () {...) Add what you need to do ...}); Can...
After the page initialization is called
<script>
Window.onload = function () {
Dosth1 ();
Dosth2 ();
}
</script>
or when you introduce jquery,
<script>
$ (document). Ready (function () {
Dosth1 ();
Dosth2 ();
});
</script>
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
