`

jquery的$(document).ready()与window.onload区别

jQueryCSS 
阅读更多

jquery中的$(document).ready()与window.onload的区别

最早接触的时候也说$(document).ready(function(){   })这个函数是用来取代页面中的window.onload;

但是今天发现 好像不是这样回事！是在做一个页面载入效果时发现的！

function winready(){document.getElementById("loading").style.display="none";}
window.onload=winready;
以上的写法  winready会在页面完全载入才触发；

jquery写法：
$(document).ready(function(){
"#loading").css("display","none");
})

以前没发现，今天因为网络卡，发现一个页面的一张图片还没载入完成，jquery的ready函数就已经触发了！

document.onload  window.onload <body onLoad="winready()">

到底又没区别？

解释这样!

$(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完

所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。
两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。
分享到：
| 数尽JAVASCRIPT的全部事件
评论
2 楼 zhangxpower 2011-07-26  
恩，有.我试过了.
1 楼 lybykw 2011-07-26  
有这等事？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery下关于$.Ready()的分析

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...

    一张表格告诉你windows.onload()与$(document).ready()的区别

    在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。   [removed]() $(document).ready() 执行时机 在页面所有元素（包括图片，引用文件）加载完后执行。 页面中所有HTML DOM，CSS DOM结构...

    onload和jquery运行顺序

    window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })

    JQuery Tips相关(1)—-关于$.Ready()

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法  接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.  对于Body的Onload...

    初始jQuery

    3. $(document).ready()与window.onload使用场合类似，当有差异 4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊：包含$符号和连缀操作 6. 每个页面都有对应的DOM模型，DOM模型包括...

    窗口和表单事件.pptx

    1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时，发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...

    图库新版jQuery焦点图 JS代码

    tips[25] = '个人行为与小规模配合压根不需要流程与规范，当交付结果需要大规模的应用时，同一的规格就显得非常重要了。'; tips[26] = '任何创作活动都是为了满足一定的需求，创新是执行过程中的副产品；为了创新而...

    jqzoom放大镜插件.zip

    /* * JQZoom Evolution 1.0.1 - Javascript Image magnifier... if($.browser.safari || $.browser.opera) { $(img).css({position:'absolute',top:'0px',left:'0px'}); } /*if(a.css('position')!= 'absolute' &&...

    jquery ready函数源代码研究

    一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...

    jQuery实例教程

    （也许window.onload()能实现同样的功能，但是jQuery更加快速，灵活）。 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web...

    js 某个页面监听事件渲染完毕的时间.pdf

    常见的方法有使用window.onload和jQuery的(document).ready两种。其中，window.onload方法是页面所有资源加载完成之后触发，因此性能较差；(document).ready方法是在页面dom元素加载完成之后触发，性能较好。 总体...

    jQuery快速高效制作网页交互特效

    在javaScript中的window事件又 window onload = fn(); 和onclick 在jQuery中常用的事件有文档就绪事件，对应的方法ready() $(document).ready(fn(){});  b：鼠标事件 常用的鼠标事件有：  click(fn); 单机鼠标...

    一个带验证的jQuery表单，同时支持无刷新编辑

    　，确保在元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件，该方法主要就是设置各个验证项的正则表达式。 　通用取值函数分三类进行取值 　文本输入框,直接取值el.value 　单多选,遍历所有...

    运用jQuery实现的Ajax无刷新删除和添加数据的表单

    ---DOM载入就绪可以查询及操纵时执行该操作|等同window.load，确保在body元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。 　用到了一个JS脚本库，主要就是设置各个验证项的正则表达式，基本...

Magicbox
Global site tag (gtag.js) - Google Analytics