码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2014-05-15 00:09:11      阅读:435      评论:0      收藏:0      [点我收藏+]

标签:jquery   javascript   事件   

     最近项目中要做一个消息提醒功能,用户登录完成后,从右下角滑出一个消息模块,类似qq弹出的广告,不过是在浏览器中的,更大了一些而已。
     开始的做法是在$(document).ready()中使用的是jQuery的slideDown展示消息div,由于页面里面有六七个块是iframe,每个iframe加载时间都比较长,内容也比较多,结果iframe没加载完,消息div就出来了,而且动画一卡卡的,效果实在无法忍受。
     后来在jQuery官网上的一片文章http://learn.jquery.com/about-jquery/how-jquery-works/发现jQuery的$(document).ready()不是等页面全部加载完再执行的,而是当前页面的dom加载完毕后就执行了,这样效率很高,速度也快。不过要想等页面全部加载完,包括内部的iframe都加载完再执行,就还要使用window.onload事件了,下面说说window.onload和$(document).ready()两者的区别。
     主要是执行时间不同,上面也说了window.onload必须等到页面内包括图片,iframe等所有元素加载完毕后才能执行,而$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕,也就是说执行时可能图片还没下载完成,iframe内容没加载完毕等。
     两者的执行时间不同,作用也不同,绝大部分情况下$(document).ready()的作用要好一些,但是要注意的是因为$(document).ready()执行时可能图片等内容没加载完,要想获取图片尺寸这类属性不一定有效。但是等全部页面都加载完再获取某个图片的尺寸,又浪费了时间,怎么办呢?好在jQuery给我们提供了一个更好的办法,可以使用load方法给指定元素绑定加载完成时的事件,如$("img").load(function(){……});
     load方法还有一个好处,如果单纯的写window.onload注册事件的话只会执行最后一个,如果要注册多个,需要额外的代码来判断,而使用jQuery的load方法可以注册多个事件,$(window).load()和window.onload是等效的,但是load方法可以注册多个事件。



$(document).ready() 与window.onload的区别,布布扣,bubuko.com

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

标签:jquery   javascript   事件   

原文地址:http://blog.csdn.net/xuepiaohan2006/article/details/25835429

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!