window.onload 的基本形式：
window.onload = function ()
{
// Do something...
}
特別注意一點：如果直接把新動作附在 window.onload 的話，是會把前一個 window.onload 的動作給蓋掉的。也就是说，同一个JS文件下，只能有一个window.onload
不過如果現在有兩個動作都需要用到 window.onload ，而且其中一個我不想改動時該怎麼辦呢？ (例如是第三方函式庫裡的程式)
這時可以改用以下的方式：
var oldOnload = window.onload || function () {};
window.onload = function ()
{
oldOnload(); // Do Something...
}
換句話說，就是先把舊的 window.onload 放在一個變數裡，然後在新的 window.onload 裡呼叫它。
很重要的一點是，一定要加上「 || function () {} 」！這樣做的目的，是怕如果在此之前沒有指定 window.onload (也就是 undefined) 時，瀏覽器會出現 JavaScript 錯誤。
另外，可以通过将对象绑定事件的方法实现：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>window.onload用法-蚂蚁部落</title>
<style type="text/css">
#bg{
100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
window.attachEvent("onload",bg);
window.attachEvent("onload",changeW);
function bg(){
document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
通过逻辑判断进行实现
function firstFunction(){
alert("hello firstFun !");
}
function secondFunction(){
alert("hello secondFun !");
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//测试
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
那onload中的JS文件的执行顺序是怎样的呢？它是在整个DOM文档加载完成后才会执行的，请看下面的代码
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta HTTP-EQUIV="Content-Type" content="charset=utf-8">
</head>
<script>
alert('2');
</script>
<body onload="init1()">
<div id='myDiv' style="height:200px;200px;background-color:#000000">
<script>
alert('3');
</script>
</div>
</body>
<script>
function init1(){
alert('1');
}
alert('4');
</script>
</html>
执行的顺序为：2,3,4,1；所以我们一般不会将页面布局的函数放在onload中，因为这样会造成页面加载的延迟现象。
总结onload的用法：
1. 可以在Body 里面执行 <body onload="alert(123)"></body>
2. 先定义好 在页面加载完成后使用
function test(){ var aa = "11111"; alert(aa); }
window.onload = test; </script>
注解: 这里的window.onload = test; 不要在test后面加() 因为这是在给事件关联触发的方法 如果加() 会立刻引发这个方法的执行(这可能不是我们的本意)
3. 使用匿名函数 <script>window.onload = function(){alert(321);}</script>
4. JS中onload多个事件该怎么写？
<1> <body onload="aa();bb();cc()">用分号隔开就可以了
<2>
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
refer:http://blog.moocss.com/tutorials/javascript-tutorials/526.html