jQuery $(document).ready()和window.onload

根据ready()方法的API说明http://api.jquery.com/ready/。

这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.

即当DOM加载完毕的时候,执行这个指定的方法.
　　因为只有document的状态ready之后,对page的操作才是安全的.
　　$(document).ready()仅在DOM准备好的时候执行一次.
 
　　与之相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候.
　　$(window).load(function(){…})会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.
　　而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.
 
　　如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行.
 
　　注意:ready()方法多次调用,传入的handler方法会串联执行(追加).
　　而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.
 

$(document).ready()的三种简写

　$( document ).ready( handler )

　$().ready( handler ) (this is not recommended)

　$( handler )

window对象和document对象

　Window对象表示浏览器中打开的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp
　Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/jsref/dom_obj_document.asp
 

Event对象

　　Event即事件,代表了各种状态:http://www.w3school.com.cn/jsref/dom_obj_event.asp
　　事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.
　　上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.
　　本文关注的onload就是其中一个事件.
 

onload事件

　　onload事件是在加载完成后立即发生.(注意其中的l是小写).
　　支持该事件的标签是:
　　<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
　　支持该事件的JavaScript对象是:
　　image, layer, window.
　　注意这里并没有document.

onload使用解析

　　最常用的就是window.onload, 会等到整个页面及各种资源都加载完成之后再执行后面赋值的function行为.
　　另外,可以在标签中使用onload,比如:
<body onload="inlineBodyOnloadTimeCounter();">
　　其中inlineBodyOnloadTimeCounter()是一个自定义的JavaScript function.
　　注意jQuery ready()的API文档中有这么一段: 
The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

说明ready()方法和<body onload=“”>是不兼容的.

注：文章来源于转载。

jQuery $(document).ready()和window.onload的更多相关文章

  1. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

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

    1.执行时机 window.onload 是网页中所有的元素都加载到浏览器后才执行 $(document).ready() 是dom完全就续就可以调用 例如:如果给一副图片添加点击事件,window. ...

  3. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  4. jQuery的$(window).load与、(document).ready和window.onload的关系

    jQuery的$(window).load与.(document).ready和window.onload的关系 $(function() { console.log('document.ready ...

  5. $(document).ready()和window.onload之间的差异

    最近使用$(document).ready(function(){})遇到一个问题:加载页面后发送数据请求后台,得到的数据不对,后发现请求后台时,发送的数据为空,没有获取到值导致的.------改成w ...

  6. $(document).ready和window.onload的区别

    $(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...

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

    $(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...

  8. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

  9. $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法

    $(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...

随机推荐

  1. C# 创建Windows Service

    当我们需要一个程序长期运行,但是不需要界面显示时可以考虑使用Windows Service来实现.这篇博客将简单介绍一下如何创建一个Windows Service,安装/卸载Windows Servi ...

  2. 第十八篇：在SOUI中实现PreTranslateMessage

    在MFC中,通常可以通过重载CWnd::PreTranslateMessage这样一个虚函数来实现对一些窗口消息的预处理.多用于tooltip的显示控制. 在SOUI中也实现了类似的机制. 要在SOU ...

  3. hibernate 关联映射

    关联关系大致分为两大类: 1.单向关系:只需单向访问关联端.例如:只能通过老师访问学生,或者只能通过学生访问老师. 2.双向关系:关联的两端可以互相访问.例如:老师和学生之间可以互相访问. 单向关联可 ...

  4. [liferay6.2]input-date日期控件

    input-date日期控件 liferay6.2中默认提供了一个简单的日期控件input-date,调用代码片段如下: <% Calendar calendar = Calendar.getI ...

  5. 在Salesforce中添加Workflow Rule

    在Salesforce中可以添加Workflow Rule来执行特定的动作,比如说:当Object的某个字段发生变化时,根据变化的值去修改其他field,和Trigger的功能很类似,不过Trigge ...

  6. 全面解析windows下Memcache技术应用

    原文  http://www.cnblogs.com/liuqin520/p/4615644.html   一.Memcache介绍 Memcache 是 danga.com 的一个项目,最早是为 L ...

  7. TortoiseSVN菜单项功能说明

    TortoiseSVN是windows下其中一个非常优秀的SVN客户端工具.通过使用它,我们可以可视化的管理我们的版本库.不过由于它只是一个客户端,所以它不能对版本库进行权限管理. TortoiseS ...

  8. HDU 3911 Black And White（线段树区间合并+lazy操作）

    开始以为是水题,结果...... 给你一些只有两种颜色的石头,0为白色,1为黑色. 然后两个操作: 1 l r 将[ l , r ]内的颜色取反 0 l r 计算[ l , r ]内最长连续黑色石头的 ...

  9. Laravel之Service Container服务容器

    managing class dependencies and performing dependency injection. Dependency injection is a fancy phr ...

  10. js 判断数组的值是否有重复

    方法一: var s = ary.join(",")+","; for(var i=0;i<ary.length;i++) { if(s.replace( ...