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

首先,

Jquery 代码:

$(window).load(function (){ 
    // 代码表达式  
 });

等价于:

JavaScript 中的以下代码

Window.onload = function (){ 
      // 编写代码 
}

注意,格式符号。


区别总结:


1、执行时间 


 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 


2、编写个数不同 


 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 

 $(document).ready()可以同时编写多个,并且都可以得到执行 


3、简化写法 


 window.onload没有简化写法 

 $(document).ready(function(){})可以简写成$(function(){});


应用细说:


ready()方法,因为执行时间的不同,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者与DOM相关的什么其他方面还没有加载好,所以例如图片的高度和宽度这样的属性此时不一定有效,这个时候,点击某些按钮,会导致出现意外的情况,这时,就需要选择window.onload方法!


最后补充:

在一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现。


那是什么原因使得Firefox正常而IE就不正常呢?


接着调试,发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行,而Firefox则是先执行$(document).ready()的内容,再执行原来的onload方法,这和上面说的完全相反!


翻阅jquery的源码看看$(document).ready()是如何实现的吧:

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
      setTimeout( arguments.callee, 0 ); 
       return; 
    } 
   // and execute any waiting functions 
   jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready );


结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。

如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=48

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。