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

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

最近项目中要做一个消息提醒功能，用户登录完成后，从右下角滑出一个消息模块，类似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）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行