Window.onload与$(document).ready()区别

本文通过实例对比了jQuery中的$(document).ready()与原生JavaScript中的Window.onload的区别。前者在DOM树构建完成后即可执行,适用于需要快速响应用户交互的情况;后者则需等待页面所有资源加载完毕。此外还介绍了如何使用这两种方式来处理图片加载等问题。

  这个对比图是从《锋利的jQuery》书上截取下来的,我自己也总结了一下:

diff-1:

  Window.onload是网页中全部元素(包括元素的关联文件)完全加载到浏览器后才能执行,$(document).ready()解析出DOM树即可访问节点和属性。 

举个例子:

  Flicker这种大型图片网站,为网页中所有图片添加某些行为,例如mouseover的时候可以显示放大图,如果用onload,那么必须等每一幅图都加载浏览器才能进行操作,如果用ready那么只要DOM树就绪就可以操作。

  DOM树就绪的时候,图片可能还没有下载完,图片的height和width不一定有效。

   遇到这种情况,怎么解决呢?

  为<img>或者其他有关联文件的元素绑定load,这里不举img的例子,举window的例子,其他的也一样,不过window是包含(窗口,框架,对象和图像的),一般只对其中某一个我们需要的进行绑定。

2种写法:(注意JS的写法是on***,而jQuery的写法是***)

$(window).load(function(){ 

})

Window.onload  = function(){

}

 

Diff-2:

 

结果是onload只输出”two”, ready两者都输出,也就是onload后面的会覆盖前面的,而ready不会,onload也有权宜之计:

 

转载于:https://www.cnblogs.com/propheterLiu/p/5890051.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值