首页 > 代码库 > $(document).ready() 与window.onload的区别

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

2024-07-04 12:36:48   232人阅读

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


联系
我们