JS 替换 window.onload 的 document.ready
2016-04-11 22:57
483 查看
通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如:
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload 的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM 已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的 HTML,这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready() 里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的 $(document).ready();
看代码:
把这段代码放到你的页面中或者某个导入的脚本中,然后你就可以像下面这样使用了:
打开页面,看到效果没?YES,这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery,但如果你的站点已经使用了 jQuery,就不用再多此一举了。
如果你并没有感觉到明显的区别,你可以到百度里随便便搜一张很大加载速度又慢的图片放到页面里试一试,打开一看,效果就很明显了。
下面还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段:
这段的用法是:
两个原理相同,唯一不同的区别是 window.onReady() 除了第一个参数可以传递要执行的函数外,还可以在后面的参数传递要传给第一个参数函数中的参数...额,前面这句话怎么这么别扭呢..意思就是 onReady 第一个参数之后的参数都将作为另外的参数传递给第一个参数的函数..好像还有点别扭??不管了,你自己理解了,总之这个传参的功能用的不多。
window.onReady(); 的传参功能实际用处不多,实现方法也是一样,代码这么多,当然还是推荐使用 document.ready();
其实 window.onload 也并非是一无用处,很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能,这样 window.onload 就可以提供一种“加载中”的功能,又或者是页面内容很少,完全无需 document.ready(); 根据各种情况,应该合理的使用 onload 和 ready。
最后提供压缩版 document.ready();
本文内容由 VGOT Design 原创,转载请保留原文链接:http://vgot.net:8080/?A65.htm
1 | window.onload = function (){ |
2 | alert( 'Hello World!' ); |
3 | }; |
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 | }); |
如果你并没有感觉到明显的区别,你可以到百度里随便便搜一张很大加载速度又慢的图片放到页面里试一试,打开一看,效果就很明显了。
下面还有一个来自于 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" , 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 | // |
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(); 的传参功能实际用处不多,实现方法也是一样,代码这么多,当然还是推荐使用 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 | })(); |
相关文章推荐
- javascript显示动态时间24小时制+外包引用(一)
- javascript:with的用法以及延长作用域链
- JavaScript中的作用域链原理
- js窗口&提示大全
- JavaScript基础教程04Math对象介绍
- JavaScript开发的技巧
- javascript显示动态时间12小时制(二)
- net.sf.JSONArray
- js图片无缝滚动代码
- document.ready和onload的区别----JavaScript文档加载完成事件(二)
- jsp servlet使用 fileupload
- 为什么找不到js文件?
- Json数据处理协议与办法
- POJ 3255 Roadblocks(Dijstra 求次短路长度)
- javascript 获取域名和页面地址
- .NET与JSP页面之间消息通讯(跨域,使用html5的postMessage实现)
- js 上传图片预览
- js日历
- document.ready和onload的区别——JavaScript文档加载完成事件
- Js DOM节点属性