最近项目中要做一个消息提醒功能,用户登录完成后,从右下角滑出一个消息模块,类似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方法可以注册多个事件。