通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:
1.window.onload = function(){
2.
func1();
3.
func2();
4.
func3();
5.
//更多加载事件………………
6.}
但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了!
01.//后台代码
02.<scrJavascript
OK,没问题。上面的onReady函数有一个可选参数,判断图片是否加载完毕。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西,但如果我们的页面严重依赖于脚本布局呢?!我们想尽快让页面呈现出大体形态,这就用到domReady了。我们在原基础上改进它。
01.(function(){
02.
if(!window.JS){
03.
window['JS'] = {}
04.
}
05.
var addEvent = function( obj, type, fn ) {
06.
if (obj.addEventListener)
07.
obj.addEventListener( type, fn, false );
08.
else if (obj.attachEvent) {
09.
obj["e"+type+fn] = fn;
10.
obj.attachEvent( "on"+type, function() {
11.
obj["e"+type+fn]();
12.
} );
13.
}
14.
};
15.
var onReady = function(loadEvent,waitForImages) {
16.
if(waitForImages) {
17.
return addEvent(window, 'load', loadEvent);
18.
}
19.
var init = function() {
20.
if (arguments.callee.done) return;
21.
arguments.callee.done = true;
22.
loadEvent.apply(document,arguments);
23.
};
24.
if(!+"\v1"){
25.
(function(){
26.
try {
27.
document.documentElement.doScroll("left");
28.
} catch(e) {
29.
setTimeout( arguments.callee, 0 );
30.
return;
31.
}
32.
init();
33.
})();
34.
}else{
35.
document.addEventListener( "DOMContentLoaded", function(){
36.
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
37.
init();
38.
}, false );
39.
}
40.
return true;
41.
}
42.
JS.onReady = onReady;
43.
var $ = function(id){
44.
return document.getElementById(id);
45.
}
46.
JS.$ = $;
47.})()
dom标准浏览器用DOMContentLoaded,这是非常正现的W3C论DOM方法,与FF的DOMMouseScroll 不一样,基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成,原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美,它在IE下无法判定iframe的内容是否加载完毕。我们继续改进它。
01.(function(){
02.
if(!window.JS){
03.
window['JS'] = {}
04.
}
05.
var addEvent = function( obj, type, fn ) {
06.
if (obj.addEventListener)
07.
obj.addEventListener( type, fn, false );
08.
else if (obj.attachEvent) {
09.
obj["e"+type+fn] = fn;
10.
obj.attachEvent( "on"+type, function() {
11.
obj["e"+type+fn]();
12.
} );
13.
}
14.
};
15.
var onReady = function(loadEvent,waitForImages) {
16.
if(waitForImages) {
17.
return addEvent(window, 'load', loadEvent);
18.
}
19.
var init = function() {
20.
if (arguments.callee.done) return;
21.
arguments.callee.done = true;
22.
loadEvent.apply(document,arguments);
23.
};
24.
if(!+"\v1"){
25.
if(window.self == window.top){
26.
(function(){
27.
try {
28.
document.documentElement.doScroll("left");
29.
} catch(e) {
30.
setTimeout( arguments.callee, 0 );
31.
return;
32.
}
33.
init();
34.
})();
35.
}else{
36.
document.attachEvent("onreadystatechange", function(){
37.
if ( document.readyState === "complete" ) {
38.
document.detachEvent( "onreadystatechange", arguments.callee );
39.
init();
40.
}
41.
});
42.
}
43.
}else{
44.
document.addEventListener( "DOMContentLoaded", function(){
45.
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
46.
init();
47.
}, false );
48.
}
49.
return true;
50.
}
51.
JS.onReady = onReady;
52.
var $ = function(id){
53.
return document.getElementById(id);
54.
}
55.
JS.$ = $;
56.})()
我们简直是在重新实现jquery的$(document).ready(function(){ })!它功能非常强悍,配合利用闭包做成的命名空间,基本刀枪不入。而且它就只污染一个全局变量“JS”,可以与YUI媲美了(笑)。不过对于一般应用来说,我们用不着做到如此面面俱到。假如我们不需要对图片进行处理,页面也没有iframe,我们可以搞下面这个微缩版出来。
01.(function(){
02.
if(!window.JS){
03.
window['JS'] = {}
04.
}
05.
var onReady = function(loadEvent) {
06.
if(!+"\v1"){
07.
(function(){
08.
try {
09.
document.documentElement.doScroll("left");
10.
} catch(e) {
11.
setTimeout( arguments.callee, 0 );
12.
return;
13.
}
14.
loadEvent();
15.
})();
16.
}else{
17.
document.addEventListener( "DOMContentLoaded", loadEvent, false );
18.
}
19.
}
20.
JS.onReady = onReady;
21.
var $ = function(id){
22.
return document.getElementById(id);
23.
}
24.
JS.$ = $;
25.})()<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>闭包环境中的事件加载</title>
<script type="text/javascript">
(function(){
if(!window.JS){
window['JS'] = {}
}
var onReady = function(loadEvent) {
if(!+"\v1"){
(function(){
try {
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( arguments.callee, 0 );
return;
}
loadEvent();
})();
}else{
document.addEventListener( "DOMContentLoaded", loadEvent, false );
}
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id);
}
JS.$ = $;
})()
JS.onReady(function(){
alert(JS.$("test").innerHTML)
});
JS.onReady(function(){
alert("dddddddddddddddd")
});
</script>
</head>
<body>
<p id="test">Test</p>
</body>
</html>
运行代码