转自：http://blog.moocss.com/tutorials/javascript-tutorials/526.html （Blog也不错，可以看看）
使用JavaScript操纵DOM，必须等待DOM加载完毕才可以执行代码，但window.onload有个坏处，它非要等到页面中的所有图片及视频加载完毕才会触发load事件。结果就是一些本来应该在打开时隐藏起来的元素，由于网络延迟，在页面打开时仍然会出现，然后又会突然消失，让用户觉得莫名其妙。我们想做的就是寻找一种方法来确定DOM被完全的加载时不用等待所有那些讨厌的图片加载完毕。必须与这种丑陋的闪烁告别！
我这里整理出针对onload事件的七种方案。
第七种方案是我们最终的解决方案，也是完美的解决方案。
三 ~ 六 的解决方案只解决了window.onload加载多个方法，但是还没有解决图片的等待加载问题，还有它们只兼容IE和FF。
最成熟的解决：http://javascript.nwbox.com/ContentLoaded/
定义和用法
onload 事件会在页面或图像加载完成后立即发生。
语法
onload=”SomeJavaScriptCode”
支持该事件的 HTML 标签：
1
|
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
|
支持该事件的 JavaScript 对象：
image, layer, window实例
第一种：
1
2
3
|
function loadFunction(){
alert("hello!");
}
|
1
|
<body onload="loadFunction()">
|
第二种：
1
2
3
4
|
window.onload = loadFunction;
function loadFunction(){
alert("hello!");
}
|
第三种：
1
2
3
4
5
6
7
8
9
10
11
|
function firstFunction(){
alert("hello firstFun !");
}
function secondFunction(){
alert("hello secondFun !");
}
window.onload = function(){
firstFunction();
secondFunction();
}
|
第四种：通用的做法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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);
|
addLoadEvent工作流程：
把现有的window.onload事件处理函数的值存入变量oldonload。
如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；
如果在这个处理函数已经绑定了一些函数，就把函数追回到现有指令未尾。
浏览器加载html内容是自上而下的（默认），而JS一般是在哪里引入——想想如果JS里面包含了一些即时执行指令，
它会操作根本不存在元素节点（因为还没有加载完）会有什么后果？结果就是出错。
addLoadEvent可以实现无论有多少个函数，都能让它们同时和window.onload事件绑定。
第五种; 推荐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function a(){
alert("a");
}
function b(){
alert("b");
}
function addEvent(obj,EventName,callBack){//给对象添加事件
if(obj.addEventListener){ //FF
obj.addEventListener(EventName,callBack,false);
}else if(obj.attachEvent){//IE
obj.attachEvent('on'+EventName,callBack);
}else{
obj["on"+EventName]=callBack;
}
}
//测试
addEvent(window,"load",a);
addEvent(window,"load",b);
|
第六种：推荐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
//测试
addLoadListener(a);
addLoadListener(b);
|
第七种：最完美的解决方案
建立一个独立的通用解决方案,兼容各种浏览器，任何人都可以使用，而无需一个具体的框架。
最初的完整解决方案：http://dean.edwards.name/weblog/2006/06/again/
一个独立的通用解决方案 ：http://www.thefutureoftheweb.com/blog/adddomloadevent.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
*
* For more info, see:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*
* To use: call addDOMLoadEvent one or more times with functions, ie:
* addDOMLoadEvent的调用方法，如下：
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // do other stuff
* });
*
*/
addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
/*//停止调用计时器*/
// kill the timer
clearInterval(load_timer);
// execute each function in the stack in the order they were added
while (exec = load_events.shift())
exec();
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
/*
DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
注册DOMContentLoaded事件，如果支持的话
*/
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
// for Internet Explorer
/*
对于IE则使用条件注释，并使用script标签的defer属性
IE中可以给script标签添加一个defer(延迟)属性，这样，标签中的脚本只有当DOM加载完毕后才执行*/
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");
script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete")
init(); // call the onload handler
};
/*@end @*/
// for Safari
/*
但对于Safari，我们需要使用setInterval方法不断检测document.readyState
当为loaded或complete的时候表明DOM已经加载完毕
*/
if (/WebKit/i.test(navigator.userAgent)) { // sniff
load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState))
init(); // call the onload handler
}, 10);
}
// for other browsers set the window.onload, but also execute the old window.onload
old_onload = window.onload;
window.onload = function() {
init();
if (old_onload) old_onload();
};
}
load_events.push(func);
}
})();
|
方案七的演示：
最成熟的解决方案：
第七种方案回头看，源码中的 hacks 用的太多，也并不完美，接下来，就看一个大家都在用的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
/*!
* contentloaded.js
*
* Author: Diego Perini (diego.perini at gmail.com)
* Summary: cross-browser wrapper for DOMContentLoaded
* Updated: 20101020
* License: MIT
* Version: 1.2
*
* URL:
* http://javascript.nwbox.com/ContentLoaded/
* http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE
*
*/
// @win window reference
// @fn function reference
(function(win, doc) {
contentLoaded=function(fn) {
var done = false, top = true,
doc = win.document, root = doc.documentElement,
add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
pre = doc.addEventListener ? '' : 'on',
init = function(e) {
if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
(e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
if (!done && (done = true)) fn.call(win, e.type || e);
},
poll = function() {
try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
init('poll');
};
if (doc.readyState == 'complete') fn.call(win, 'lazy');
else {
if (doc.createEventObject && root.doScroll) {
try { top = !win.frameElement; } catch(e) { }
if (top) poll();
}
doc[add](pre + 'DOMContentLoaded', init, false);
doc[add](pre + 'readystatechange', init, false);
win[add](pre + 'load', init, false);
}
}
})(window, document);
<pre>
<h3>使用方法：</h3>
<pre lang="javascript" line="1">
//测试
var $tt = (new Date).getTime();
function timeElapsed(t) { return ((new Date()).getTime() - t); }
contentLoaded(
function (e) {
document.body.style.backgroundColor = 'green';
window.status =
window.defaultStatus =
' * ' + (e.type || e) + ' ' +
' - ' + (e.eventType ? e.eventType : 'native') +
' in ' + timeElapsed($tt) + ' ms.';
}
);
//测试
contentLoaded(
function(){
var el=document.getElementById('logo');
console.log(el);
}
);
|
This entry was posted in
JavaScript and tagged Tags:
JavaScript,
JavaScript基础.
Bookmark the
permalink