JS 替换 window.onload 的 document.ready
来源:互联网 发布:vb编程软件中文下载 编辑:程序博客网 时间:2024/06/05 05:23
通常我们想要在页面内容加载完成后运行 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
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
1
2
3
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload 的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM 已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的 HTML,这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready() 里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的 $(document).ready();
看代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
把这段代码放到你的页面中或者某个导入的脚本中,然后你就可以像下面这样使用了:
1
2
3
打开页面,看到效果没?YES,这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery,但如果你的站点已经使用了 jQuery,就不用再多此一举了。
如果你并没有感觉到明显的区别,你可以到百度里随便便搜一张很大加载速度又慢的图片放到页面里试一试,打开一看,效果就很明显了。
下面还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段:
01
02
03
04
08
09
10
11
12
13
14
15
16
17
18
19
20