请选择 进入手机版 | 继续访问电脑版
window.onload()

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload


    Examples


  1. [/code][code]
复制代码
Using Multiple JavaScript Onload Functions

How to using Multiple JavaScript window.onload() Functions-1.jpg
JavaScript is one of the most popular programming languages in use on the World Wide Web. It can create interactive pages through the use of menus, forms and calendars. It can also be used to track a visitor's history on your site, play games and many other things.
When scripts are written they're used to accomplish a given task, e.g., create a rotating picture gallery, or to validate a form. This means that for each different type of usage, a separate script is necessary. Often, a script is called using an onload function.
Loading the Page

When a Web page is loaded, the code on the page — whether HTML, CSS, PHP, or some other type — is generally processed from the top down. As the browser comes upon a section of code, it's executed and the intended action is (hopefully) performed. Let's say you have the following script in the head section of a Web page:

When the page is loaded, the browser will stop at the script above and execute it. An alert window will pop up and the page will stop loading until the alert window is closed. Often, this isn't an issue, but if the script needs to access elements on the page that aren't yet loaded (i.e., below the current code), you will encounter problems. To resolve these, here are a few solutions.
Move it to the Bottom

One method is to place the script at the bottom of the Web page, just above the closing </body> tag. This does, however, present a few problems. First, there is a period of time that those elements which are you seeking to change with the script will be clearly seen by the visitor. Then, once the script is executed, they will "magically" change. With a fast loading page and a script that executes quickly, this might not be a problem, but if the original elements can be seen by the visitor, and are then changes, the visitor may perceive it to be some type of a hack or bug on the page, and leave the site immediately. Obviously, that's not good.
Secondly, either the script, or a link to it, will need to be included in the actual HTML body code. That's not unobtrusive JavaScript. It's best if you can keep everything separate. You'll find it's easier to work on any aspect of the page, and the page itself will load faster.
The onload Function

The window object in JavaScript has an event handler called onload. When this event handler is used, the entire page and all of its related files and components are loaded before the function listed in the onload event handler is executed, hence the term "on load."
As shown in the script above, it's easy to use, but what if you have more than one function you want to call using an onload event handler?
You would think you could just stack them like this:
  1. [/code]
  2. Unfortunately, it's not that simple. After the first onload event handler is executed, it will be replaced when the second onload event handler is executed. That, in turn, will be replaced immediately just as soon as the third onload event handler is executed. There are workarounds for this, though.
  3. [size=4]Let's Put Them in a Chain[/size]
  4. One method that has been used quite a bit is the linking of multiple events. It places several function calls in a chain, using one onload event handler. The method would look like this:
  5. [code]
复制代码

Still, once again we run into the unobtrusive problem. In addition, you will need to add this to the <body> tag of every page that needs to use the called functions. That could be quite tedious for a large Web site, especially when changes or additions are needed.
Within Another Function

Another method is the following script:
  1. [/code]
  2. While this is good, there's one method that's even better.
  3. [size=4][b]The addLoadEvent Function[/b][/size]
  4. [code]
复制代码
This function was written by Simon Willison. It has several advantages. For one, it's really unobtrusive. It can be placed in a file with your other scripts or in a separate file. (If it's in a separate file, just be sure to call it after the other files, so the functions will be available.)
Also, it works even if the onload event handler has been previously assigned. Simon explains it like this:
"The way this works is relatively simple: if window.onload has not already been assigned a function, the function passed to addLoadEvent is simply assigned to window.onload. If window.onload has already been set, a brand new function is created which first calls the original onload handler, then calls the new handler afterwards."
Isn't that beautiful? So, if you already have a script that uses the onload event handler, you don't need to dig it out and change it, unless you want to. It also allows for extra code. Here's an example that calls two functions and adds a third, independent addLoadEvent:

[code][/code]
After calling func1 and func2, a function is created that changes the background color of the Web page. Each of these is executed in the order shown. Try it yourself and see how it works!
Conclusion

Sometimes, figuring out which approach to use in coding takes a bit of trial and error. Other times it's advantageous to search the Web and see what others have done. The addLoadEvent function should work just fine in this situation. We use it over at the JavaScript Source for all of our scripts requiring the onload event handler.

Jquery:

window.onload vs $(document).ready()

window.onload vs $(document).ready()


window.onload和jquery.ready有什么区别么?

https://segmentfault.com/q/1010000000667904
1. 执行的速度不同:
原生JavaScript的 window.onload 必须等到包括图片在内的等所有页面元素完全加载完毕后才会执行,比较慢;
然而,jQuery的$(document).ready()是在DOM树结构绘制完成后就立刻执行的,不必等到所有元素加载完毕,比较快;
PS:jQuery 也提供与 window.onload 类似的事件触发方法 $(window).load() ,该方法可以绑定到任意元素上;
2. 可以执行的个数(次数)不同
原生JavaScript的 window.onload 事件在页面只能有一个,若同时存在多个window.onload事件,只会执行最后一个(后面会覆盖前面的);然而,jQuery 可以同时编写多个$(document).ready() 分别执行不同的事件函数,每个事件函数可以正常的被执行(不存在覆盖问题);
3. 书写的方式不同
window.onload 只有一种写法,没有简化写法;
$(document).ready(function(){})可以简写成$(function(){});
PS:可以用HTML5的DOMContentLoaded事件代替;
参考链接:
GlobalEventHandlers.onload
http://www.w3schools.com/jsref/event_onload.asp
jQuery $(document).ready()和JavaScript onload事件
分享到 :
0 人收藏

3 个回复

倒序浏览
璎婲  高级会员 | 4 天前
Using Multiple JavaScript Onload Functions
GlobalEventHandlers.onload
Jquery
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部