JS 替换 window.onload 的 document.ready
来源:互联网 发布:unity3d吃金币 编辑:程序博客网 时间:2024/05/21 22:44
通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如:
1
window.onload =
function
(){
2
alert(
'Hello World!'
);
3
};
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload 的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM 已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的 HTML,这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready() 里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的 $(document).ready();
看代码:
01
(
function
() {
02
var
ie = !!(window.attachEvent && !window.opera);
03
var
wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
04
var
fn = [];
05
var
run =
function
() {
for
(
var
i = 0; i < fn.length; i++) fn[i](); };
06
var
d = document;
07
d.ready =
function
(f) {
08
if
(!ie && !wk && d.addEventListener)
09
return
d.addEventListener(
'DOMContentLoaded'
, f,
false
);
10
if
(fn.push(f) > 1)
return
;
11
if
(ie)
12
(
function
() {
13
try
{ d.documentElement.doScroll(
'left'
); run(); }
14
catch
(err) { setTimeout(arguments.callee, 0); }
15
})();
16
else
if
(wk)
17
var
t = setInterval(
function
() {
18
if
(/^(loaded|complete)$/.test(d.readyState))
19
clearInterval(t), run();
20
}, 0);
21
};
22
})();
把这段代码放到你的页面中或者某个导入的脚本中,然后你就可以像下面这样使用了:
1
document.ready(
function
(){
2
alert(
'Document is ready!'
);
3
});
打开页面,看到效果没?YES,这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery,但如果你的站点已经使用了 jQuery,就不用再多此一举了。
如果你并没有感觉到明显的区别,你可以到百度里随便便搜一张很大加载速度又慢的图片放到页面里试一试,打开一看,效果就很明显了。
下面还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段:
01
~
function
() {
02
var
FNArray=[];
03
var
D = document;
04
/**
05
* 使用举例:
06
window.onReady(FunctionName[,argu1,[argu2,[....]]]);
07
*/
08
window.onReady =
function
(fallBackFunction) {
09
10
var
argu=[];
11
for
(
var
i=1,len=arguments.length; i<len; i++) {
12
argu.push(arguments[i]);
13
}
14
var
is_ie = !!(window.attachEvent && !window.opera);
//增加的
15
if
(window.readyBound)
return
fallBackFunction.apply(
this
,argu);
16
if
(!is_ie)
return
fallBackFunction.apply(
this
,argu);
17
FNArray.push(fallBackFunction);
18
readyBound =
true
;
19
var
ready = 0;
20
//Mozilla, Opera and webkit nightlies currently support this event
21
if
(D.addEventListener) {
22
//Use the handy event callback
23
D.addEventListener(
"DOMContentLoaded"
,
function
() {
24
D.removeEventListener(
"DOMContentLoaded"
, arguments.callee,
false
);
25
if
(ready)
return
;
26
ready = 1;
27
for
(
var
i=0,len=FNArray.length; i<len; i++) {
28
FNArray[i] ? FNArray[i].apply(
this
,argu) : 0;
29
}
30
},
false
);
31
32
// If IE event model is used
33
}
else
if
(D.attachEvent) {
34
// ensure firing before onload,
35
// maybe late but safe also for iframes
36
D.attachEvent(
"onreadystatechange"
,
function
() {
37
if
(D.readyState ===
"complete"
) {
38
D.detachEvent(
"onreadystatechange"
, arguments.callee);
39
if
(ready)
return
;
40
ready = 1;
41
for
(
var
i=0,len=FNArray.length; i<len; i++) {
42
FNArray[i] ? FNArray[i].apply(
this
,argu) : 0;
43
}
44
}
45
});
46
47
// If IE and not an iframe
48
// continually check to see if the D is ready
49
if
(D.documentElement.doScroll && window == window.top)(
function
() {
50
if
(ready)
return
;
51
try
{
52
// If IE is used, use the trick by Diego Perini
53
// http://javascript.nwbox.com/IEContentLoaded/
54
D.documentElement.doScroll(
"left"
);
55
}
catch
(error) {
56
setTimeout(arguments.callee, 0);
57
return
;
58
}
59
ready = 1;
60
for
(
var
i=0,len=FNArray.length; i<len; i++) {
61
FNArray[i] ? FNArray[i].apply(
this
,argu) : 0;
62
}
63
})();
64
}
65
};
66
}();
这段的用法是:
1
window.onReady(
function
(){
2
alert(
'Bingo~!'
);
3
});
两个原理相同,唯一不同的区别是 window.onReady() 除了第一个参数可以传递要执行的函数外,还可以在后面的参数传递要传给第一个参数函数中的参数...额,前面这句话怎么这么别扭呢..意思就是 onReady 第一个参数之后的参数都将作为另外的参数传递给第一个参数的函数..好像还有点别扭??不管了,你自己理解了,总之这个传参的功能用的不多。
window.onReady(); 的传参功能实际用处不多,实现方法也是一样,代码这么多,当然还是推荐使用 document.ready();
其实 window.onload 也并非是一无用处,很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能,这样 window.onload 就可以提供一种“加载中”的功能,又或者是页面内容很少,完全无需 document.ready(); 根据各种情况,应该合理的使用 onload 和 ready。
最后提供压缩版 document.ready();
1
(
function
() {
2
var
ie =!!(window.attachEvent&&!window.opera),wk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525);
3
var
fn =[],run=
function
(){
for
(
var
i=0;i<fn.length;i++)fn[i]();},d=document;d.ready=
function
(f){
4
if
(!ie&&!wk&&d.addEventListener){
return
d.addEventListener(
'DOMContentLoaded'
,f,
false
);}
if
(fn.push(f)>1)
return
;
5
if
(ie)(
function
(){
try
{d.documentElement.doScroll(
'left'
);run();}
catch
(err){setTimeout(arguments.callee,0);}})();
6
else
if
(wk)
var
t=setInterval(
function
(){
if
(/^(loaded|complete)$/.test(d.readyState))clearInterval(t),run();},0);};
7
})();
本文内容由 VGOT Design 原创,转载请保留原文链接:http://vgot.net/?A65.htm
0 0
- JS 替换 window.onload 的 document.ready
- JS 替换 window.onload 的 document.ready
- JS 替换 window.onload 的 document.ready
- JS 替换 window.onload 的 document.ready
- js中替换window.onload的方法 document.ready
- js的window.onload和jquery document.ready()的区别
- js中window.onload()与$(document).ready()的对比
- angular.js中window.onload(),$(document).ready()的写法
- window.onload与jquery的$(document).ready
- document.ready和window.onload的区别
- $(document).ready()和window.onload的区别
- document.ready和window.onload的区别
- window.onload与$(document).ready()的区别
- window.onload 与 document.ready 的区别
- window.onload 和 $(document).ready的 区别
- $(document).ready() 与 window.onload的区别
- window.onload与document.ready的区别
- $(document).ready() 与window.onload的区别
- Android带进度反馈的上传实现
- HDU 1874 最短路基础入门题
- google authenticator (双重身份验证器)的java使用
- String,StringBuffer与StringBuilder的区别??
- linux find
- JS 替换 window.onload 的 document.ready
- 游戏开发 cocos2d-x 编译成android apk 注意的地方
- hdu_1004
- 计算几何
- PHP4和PHP5的构造函数兼容问题
- SQL语句的一些积累
- Android视图绘制流程完全解析,带你一步步深入了解View(二)
- 又来一段笔试简单代码 计算一年中的第几天
- HDU 2111 Saving HDU (贪心)