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++】必须在类初始化列表中初始化的几种情况

    转自:http://www.cnblogs.com/kaituorensheng/p/3477630.html 1. 类成员为const类型 2. 类成员为引用类型 #include <iost ...

  2. VS2010 打开 VS2012 的项目

    用 VS2010 打开 VS2012 项目,只需两步. 1. 修改解决方案文件(*.sln) 使用记事本打开 *.sln 文件,将里面的 Microsoft Visual Studio Solutio ...

  3. JavaScript中new和this

    [TOC] new var obj = new Base(); 相当于: var obj = {}; //创建空对象obj obj.__proto__ = Base.prototype; //将空对象 ...

  4. pythonchallenge之C++学习篇-01

    字符处理时每个语言都具备的一种功能,其中还有一些语言因此出名,比如perl,shell,还有一些函数式的编程语言 C语言中的字符串与数组和指针联系的比较紧密,因此可以这样生命字符串*p="h ...

  5. spring配置的相关文章

    1.maven项目中自动下载jar包的pom.xml配置 http://blog.sina.com.cn/s/blog_643634b80101hd3i.html 2.参考配置1:http://www ...

  6. loadrunner实现字符串的替换

        char *replace_str(char *str, char *orig, char *rep) {    static char buffer[9096];   char *p;  i ...

  7. loadrunner参数化excel数据

    LR参数化数据源Oracle,MSSQL,Excel参数化的方法: 重点介绍excel数据参数化的方法: 1.首先创建excel表格: 注意要写列明   2.创建excel表连接:   参数化完成后, ...

  8. ubuntu安装中文支持

    sudo apt-get install language-pack-zh-hant language-pack-zh-hans

  9. Android拓展系列(12)--使用Gradle发布aar项目到JCenter仓库

    目的 发布自己的android library(也就是aar)到公共的jcenter仓库,所有的人都能用gradle最简单的方式引用. 为什么选择jcenter,它兼容maven,而且支持更多形式仓库 ...

  10. Swift3.0语言教程字符串大小写转化

    Swift3.0语言教程字符串大小写转化 Swift3.0语言教程字符串大小写转化,在字符串中,字符串的格式是很重要的,例如首字母大写,全部大写以及全部小写等.当字符串中字符很多时,通过人为一个一个的 ...