转下来供自己学习!
通常我们想要在页面内容加载完成后运行 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/?A65.htm
此外,也可以简单的把onload中的内容搬到HTML的尾部,这样,当HTML代码运行到尾部时,所有DOM都已经加载完毕,这时就可以直接运行Javascript代码了,而不用等待image的加载。
通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如:
window.onload = function(){ alert('Hello World!'); };
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload 的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM 已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的 HTML,这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready() 里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的 $(document).ready();
看代码:
(function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); }; var d = document; d.ready = function (f) { if (!ie && !wk && d.addEventListener) return d.addEventListener('DOMContentLoaded', f, false); if (fn.push(f) > 1) return; if (ie) (function () { try { d.documentElement.doScroll('left'); run(); } catch (err) { setTimeout(arguments.callee, 0); } })(); else if (wk) var t = setInterval(function () { if (/^(loaded|complete)$/.test(d.readyState)) clearInterval(t), run(); }, 0); }; })();
把这段代码放到你的页面中或者某个导入的脚本中,然后你就可以像下面这样使用了:
document.ready(function(){ alert('Document is ready!'); });
打开页面,看到效果没?YES,这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery,但如果你的站点已经使用了 jQuery,就不用再多此一举了。
如果你并没有感觉到明显的区别,你可以到百度里随便便搜一张很大加载速度又慢的图片放到页面里试一试,打开一看,效果就很明显了。
下面还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段:
~function() { var FNArray=[]; var D = document; /** * 使用举例: window.onReady(FunctionName[,argu1,[argu2,[....]]]); */ window.onReady = function(fallBackFunction) { var argu=[]; for(var i=1,len=arguments.length; i<len; i++) { argu.push(arguments[i]); } var is_ie = !!(window.attachEvent && !window.opera); //增加的 if(window.readyBound) return fallBackFunction.apply(this,argu); if(!is_ie) return fallBackFunction.apply(this,argu); FNArray.push(fallBackFunction); readyBound = true; var ready = 0; //Mozilla, Opera and webkit nightlies currently support this event if(D.addEventListener) { //Use the handy event callback D.addEventListener("DOMContentLoaded", function() { D.removeEventListener("DOMContentLoaded", arguments.callee, false); if(ready) return; ready = 1; for(var i=0,len=FNArray.length; i<len; i++) { FNArray[i] ? FNArray[i].apply(this,argu) : 0; } }, false); // If IE event model is used } else if(D.attachEvent) { // ensure firing before onload, // maybe late but safe also for iframes D.attachEvent("onreadystatechange", function() { if(D.readyState === "complete") { D.detachEvent("onreadystatechange", arguments.callee); if (ready) return; ready = 1; for(var i=0,len=FNArray.length; i<len; i++) { FNArray[i] ? FNArray[i].apply(this,argu) : 0; } } }); // If IE and not an iframe // continually check to see if the D is ready if(D.documentElement.doScroll && window == window.top)(function() { if(ready) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ D.documentElement.doScroll("left"); } catch(error) { setTimeout(arguments.callee, 0); return; } ready = 1; for (var i=0,len=FNArray.length; i<len; i++) { FNArray[i] ? FNArray[i].apply(this,argu) : 0; } })(); } }; }();
这段的用法是:
window.onReady(function(){ alert('Bingo~!'); });
两个原理相同,唯一不同的区别是 window.onReady() 除了第一个参数可以传递要执行的函数外,还可以在后面的参数传递要传给第一个参数函数中的参数...额,前面这句话怎么这么别扭呢..意思就是 onReady 第一个参数之后的参数都将作为另外的参数传递给第一个参数的函数..好像还有点别扭??不管了,你自己理解了,总之这个传参的功能用的不多。
window.onReady(); 的传参功能实际用处不多,实现方法也是一样,代码这么多,当然还是推荐使用 document.ready();
其实 window.onload 也并非是一无用处,很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能,这样 window.onload 就可以提供一种“加载中”的功能,又或者是页面内容很少,完全无需 document.ready(); 根据各种情况,应该合理的使用 onload 和 ready。
最后提供压缩版 document.ready();
(function () { var ie =!!(window.attachEvent&&!window.opera),wk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525); var fn =[],run=function(){for(var i=0;i<fn.length;i++)fn[i]();},d=document;d.ready=function(f){ if(!ie&&!wk&&d.addEventListener){return d.addEventListener('DOMContentLoaded',f,false);}if(fn.push(f)>1)return; if(ie)(function(){try{d.documentElement.doScroll('left');run();}catch(err){setTimeout(arguments.callee,0);}})(); else if(wk)var t=setInterval(function(){if(/^(loaded|complete)$/.test(d.readyState))clearInterval(t),run();},0);}; })();
本文内容由 VGOT Design 原创,转载请保留原文链接:http://vgot.net/?A65.htm
此外,也可以简单的把onload中的内容搬到HTML的尾部,这样,当HTML代码运行到尾部时,所有DOM都已经加载完毕,这时就可以直接运行Javascript代码了,而不用等待image的加载。
相关推荐
浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用[removed]()方法。 在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。 [removed]() $(document).ready...
常见的方法有使用window.onload和jQuery的(document).ready两种。其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体...
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })
(也许window.onload()能实现同样的功能,但是jQuery更加快速,灵活)。 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web...
3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊:包含$符号和连缀操作 6. 每个页面都有对应的DOM模型,DOM模型包括...
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...
6 $ document ready和window onload的区别 7 css如何清除浮动 8 SqlTransaction事务的用法 9 extjs中apply和applyIf 10 asp net如何在后台输出js脚本">1 char nchar varchar nvarchar类型说明 2 如何防止表单重复...
* JQZoom Evolution 1.0.1 - Javascript Image magnifier * * Copyright (c) Engineer Renzi Marco(www.mind-projects.it) * * $Date: 12-12-2008 * * ChangeLog: * * $License : GPL,so any change to ...
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload...
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script>") } if (code=="gg300x250_1"){//85849 GOOGLE document.write('...
一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...
var img = document . getElementById ( 'logo' ) ; var imgUrl = 'https://assets-cdn.github.com/images/modules/logos_page/Octocat.png' ; imgReady ( imgUrl , { onload : function ( e ) { console . log ...
---DOM载入就绪可以查询及操纵时执行该操作|等同window.load,确保在body元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。 用到了一个JS脚本库,主要就是设置各个验证项的正则表达式,基本...
var Y=window,T={innerHTML:""},N="document",H="documentElement",C="getElementsByTagName",V,A,S,G,c,X=navigator.appName;if(X=="Microsoft Internet Explorer")S=true;else if(X=="Opera")c=true;else G=true;A...
,确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件,该方法主要就是设置各个验证项的正则表达式。 通用取值函数分三类进行取值 文本输入框,直接取值el.value 单多选,遍历所有...
在javaScript中的window事件又 window onload = fn(); 和onclick 在jQuery中常用的事件有文档就绪事件,对应的方法ready() $(document).ready(fn(){}); b:鼠标事件 常用的鼠标事件有: click(fn); 单机鼠标...
显示文档中所有脚本的信息。 您网页上的所有Javascript简化。 - 每个页面上JS的状态概述。 - 总结文档中所有脚本的位置。...DOM Ready,Window onLoad和Document Loading事件。 支持语言:English (United States)