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. android 面试题

    一,什么是OOM (1)先从定义开始:Android(Java)中常见的容易引起内存泄漏的不良代码Android主要应用在嵌入式设备当中,而嵌入式设备由于一些众所周知的条件限制,通常都不会有很高的配置 ...

  2. android 入门-android Studio git配置

    以后在整理

  3. 利用Browser Link提高前端开发的生产力

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如Ang ...

  4. ZLL本地局域网通信过程

    Interface_srpcserver -----以灯的状态操作位例 网关与客户端通过Socket API通信,Socket API在socket_server.c中实现,socket_server ...

  5. Java中引用类 strong reference .SoftReference 、 WeakReference 和 PhantomReference的区别

      当在 Java 2 平台中首次引入 java.lang.ref 包,其中包含 SoftReference . WeakReference 和 PhantomReference 三个引用类,引用类的 ...

  6. 完善SQL农历转换函数

    -------------------------------------------------------------------- --  Author : 原著:          改编:ht ...

  7. OGNL表示式使用和值栈

    另外值得参考博客:http://blog.csdn.net/resigshy/article/details/7560573 OGNL是Object Graphic Navigation Langua ...

  8. css新增选择器

  9. td 的colspan属性

    看来要长长记性了,这个问题上次遇到过这次又犯了这个错. <table> <tr> <td colspan="10"> </td> & ...

  10. UVA - 11488 字典树

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...