在JQuery中,我们可以看到有两种写法:$(function(){}) 和$(document).ready(function(){})。
这两个方法效果一样,都是在dom文档树加载完之后执行的一个函数(这里的dom文档树,并不代表全部文件加载完)。
而window.onload是在dom文档树和所有文件加载完之后执行的一个函数。所以,$(document).ready(function(){})是比window.onload先执行。
我们来看下JQuery内部,$(document).ready(function(){})是如何实现的:
document.ready=function(callback){
//兼容FF,Google
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',function(){
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
callback();
},false)
//兼容IE
}else if(document.attachEvent){
document.attachEvent('onreadystatechange',function(){
if(document.readyState=="complete"){
document.detachEvent("onreadystatechange",arguments.callee);
callback();
}
})
}else if(document.lastChild==document.body){
callback();
}
}
document.ready 函数实现了,下面来验证两个函数哪个先执行:
window.onload=function(){
alert('onload');
};
document.ready(function(){
alert('ready');
})
执行之后,会发现先弹出 ready 再弹出 onload。
转载自:http://www.cnblogs.com/a546558309/p/3478344.html
相关推荐
在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。 [removed]() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。 页面中所有HTML DOM,CSS DOM结构...
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload...
常见的方法有使用window.onload和jQuery的(document).ready两种。其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体...
this.node.onload = function() { //setto il cursor e la posizione dell'href a.css({'cursor':'crosshair','display':'block'}); if(a.css('position')!= 'absolute' && a.parent().css('position')) { ...
6 $ document ready和window onload的区别 7 css如何清除浮动 8 SqlTransaction事务的用法 9 extjs中apply和applyIf 10 asp net如何在后台输出js脚本">1 char nchar varchar nvarchar类型说明 2 如何防止表单重复...
1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...
3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊:包含$符号和连缀操作 6. 每个页面都有对应的DOM模型,DOM模型包括...
document.writeln ('<dd>08月05日 网页背景和小图片添加打包下载</dd>'); document.writeln ('<dd>07月12日 修复搜索、导航和返回顶部BUG</dd>'); document.writeln ('<dd>06月26日 改进网页背景频道预览功能</dd>')...
一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...
(也许window.onload()能实现同样的功能,但是jQuery更加快速,灵活)。 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web...
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 ...
,确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件,该方法主要就是设置各个验证项的正则表达式。 通用取值函数分三类进行取值 文本输入框,直接取值el.value 单多选,遍历所有...
在javaScript中的window事件又 window onload = fn(); 和onclick 在jQuery中常用的事件有文档就绪事件,对应的方法ready() $(document).ready(fn(){}); b:鼠标事件 常用的鼠标事件有: click(fn); 单机鼠标...
---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...
显示文档中所有脚本的信息。 您网页上的所有Javascript简化。 - 每个页面上JS的状态概述。 - 总结文档中所有脚本的位置。...DOM Ready,Window onLoad和Document Loading事件。 支持语言:English (United States)