使用JavaScript操纵DOM，必须等待DOM加载完毕才可以执行代码，但window.onload有个坏处，它非要等到页面中的所有图片 及视频加载完毕才会触发load事件。结果就是一些本来应该在打开时隐藏起来的元素，由于网络延迟，在页面打开时仍然会出现，然后又会突然消失，让用户觉 得莫名其妙。我们想做的就是寻找一种方法来确定DOM被完全的加载时不用等待所有那些讨厌的图片加载完毕。必须与这种丑陋的闪烁告别！
我这里整理出针对onload事件的七种方案。
第七种方案是我们最终的解决方案，也是完美的解决方案。
三 ~ 六 的解决方案只解决了window.onload加载多个方法，但是还没有解决图片的等待加载问题，还有它们只兼容IE和FF。
定义和用法
语法
οnlοad=”SomeJavaScriptCode”
支持该事件的 HTML 标签：
1 <body
>
, <frame
>
, <frameset
>
, <iframe
>
, <img
>
, <link
>
, <script
>
支持该事件的 JavaScript 对象：
image, layer, window实例
第一种：
1 function
loadFunction(
)
{
alert
(
"hello!"
)
;
}
1 <body
onload
=
"loadFunction()"
>
第二种：
1 window.onload
=
loadFunction;
function
loadFunction(
)
{
alert
(
"hello!"
)
;
}
第三种：
1 function
firstFunction(
)
{
alert
(
"hello firstFun !"
)
;
}
function
secondFunction(
)
{
alert
(
"hello secondFun !"
)
;
}
onload
=
function
(
)
{
(
)
;
(
)
;
}
第四种：通用的做法
1 function
firstFunction(
)
{
alert
(
"hello firstFun !"
)
;
}
function
secondFunction(
)
{
alert
(
"hello secondFun !"
)
;
}
function
addLoadEvent(
func)
{
var
oldonload =
window.onload
;
if
(
typeof
window.onload
!=
'function'
)
{
onload
=
func;
}
else
{
onload
=
function
(
)
{
(
)
;
(
)
;
}
}
}
//测试
(
firstFunction)
;
(
secondFunction)
;
addLoadEvent工作流程： 把现有的window.onload事件处理函数的值存入变量oldonload。
如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；
如果在这个处理函数已经绑定了一些函数，就把函数追回到现有指令未尾。
浏览器加载html内容是自上而下的（默认），而JS一般是在哪里引入——想想如果JS里面包含了一些即时执行指令，
它会操作根本不存在元素节点（因为还没有加载完）会有什么后果？结果就是出错。
addLoadEvent可以实现无论有多少个函数，都能让它们同时和window.onload事件绑定。
第五种; 推荐
1 function
a(
)
{
alert
(
"a"
)
;
}
function
b(
)
{
alert
(
"b"
)
;
}
function
addEvent(
obj,
EventName,
callBack)
{
//给对象添加事件
if
(
obj.addEventListener
)
{
//FF
addEventListener
(
EventName,
callBack,
false
)
;
}
else
if
(
obj.attachEvent
)
{
//IE
attachEvent
(
'on'
+
EventName,
callBack)
;
}
else
{
[
"on"
+
EventName]
=
callBack;
}
}
//测试
(
window,
"load"
,
a)
;
(
window,
"load"
,
b)
;
第六种：推荐
1 function
a(
)
{
alert
(
"a"
)
;
}
function
b(
)
{
alert
(
"b"
)
;
}
// Please note: this file contains snippets for comparison
// it is not self-contained or ready-to-use code as such
function
addLoadListener(
fn)
{
if
(
typeof
window.addEventListener
!=
'undefined'
)
{
addEventListener
(
'load'
,
fn,
false
)
;
}
else
if
(
typeof
document.addEventListener
!=
'undefined'
)
{
addEventListener
(
'load'
,
fn,
false
)
;
}
else
if
(
typeof
window.attachEvent
!=
'undefined'
)
{
attachEvent
(
'onload'
,
fn)
;
}
else
{
var
oldfn =
window.onload
;
if
(
typeof
window.onload
!=
'function'
)
{
onload
=
fn;
}
else
{
onload
=
function
(
)
{
(
)
;
(
)
;
}
;
}
}
}
//测试
(
a)
;
(
b)
;
第七种：最完美的解决方案
建立一个独立的通用解决方案,兼容各种浏览器，任何人都可以使用，而无需一个具体的框架。
最初的完整解决方案：http://dean.edwards.name/weblog/2006/06/again/
一个独立的通用解决方案 ：http://www.thefutureoftheweb.com/blog/adddomloadevent .
1 /*
=
(
function
(
)
{
// create event function stack
var
load_events =
[
]
,
,
,
,
,
,
=
function
(
)
{
=
true
;
/*//停止调用计时器*/
// kill the timer
(
load_timer)
;
// execute each function in the stack in the order they were added
while
(
exec =
load_events.shift
(
)
)
(
)
;
if
(
script)
script.onreadystatechange
=
''
;
}
;
return
function
(
func)
{
// if the init function was already ran, just run this function now and stop
if
(
done)
return
func(
)
;
if
(
!
load_events[
0
]
)
{
// for Mozilla/Opera9
/*
if
(
document.addEventListener
)
addEventListener
(
"DOMContentLoaded"
,
init,
false
)
;
// for Internet Explorer
/*
/*@cc_on @*/
/*@if (@_win32)
// for Safari
/*
if
(
/WebKit/i
.test
(
navigator.userAgent
)
)
{
// sniff
=
setInterval(
function
(
)
{
if
(
/loaded|complete/
.test
(
document.readyState
)
)
(
)
;
// call the onload handler
}
,
10
)
;
}
// for other browsers set the window.onload, but also execute the old window.onload
=
window.onload
;
onload
=
function
(
)
{
(
)
;
if
(
old_onload)
old_onload(
)
;
}
;
}
push
(
func)
;
}
}
)
(
)
;
方案七的演示：
扫一扫
2832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
