1. window.onload = function(){};

当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。

2. $(document).ready();
当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。
常用于检测页面（及其附带资源）是否加载完毕。

总而言之，他们的调用顺序是window.onload = function(){}; >> $(document).ready(); ,测试代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>jquery立即执行函数</title>

  <script src="jquery.min.js"></script>

</head>

<body>

<script>

  $(document).ready(function () {

    console.log("ready");

  });

  window.onload = function () {

    console.log("onload");

  };

</script>

</body>

</html>

测试结果如下：

区别：

1.执行时间
        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
         window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
         $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
         window.onload没有简化写法
         $(document).ready(function(){})可以简写成$(function(){});

以下代码无法正确执行：

  window.onload = function(){

    alert("text");

  };

  window.onload = function(){

    alert("text");

  };

结果只输出第二个

$(document).ready()能同时编写多个
以下代码正确执行：

  $(document).ready(function(){

    alert("Hello World");

  });

  $(document).ready(function(){

    alert("Hello again");

  });

结果两次都输出  Hello World

 

另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
Jquery 代码如下：
$(window).load(function (){
       // 编写代码 
});

等价于 JavaScript 中的以下代码
Window.onload = function (){
     // 编写代码
}

——————————————————————————————

最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。

　　起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而
onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大
较多的时候，这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了，还不见jquery的效果出来。

　　删了onload加载的方法试试，结果还是一样，看来没有必要把原本的onload事件绑定也改用$(document).ready()来
写。那是什么原因使得Firefox正常而IE就能呢？接着调试，发现IE下原来绑定的onload方法竟然先于$(document).ready()
的内容执行，而Firefox则是先执行$(document).ready()的内容，再执行原来的onload方法。这个和网上的说法似乎不完全一致
啊，呵呵，有点意思，好像越来越接近真相了。

　　翻翻jquery的源码看看$(document).ready()是如何实现的吧：

  if (jQuery.browser.msie && window == top) (function () {

    if (jQuery.isReady) return;

    try {

      document.documentElement.doScroll("left");

    } catch (error) {

      setTimeout(arguments.callee, 0);

      return;

    }

    // and execute any waiting functions

    jQuery.ready();

  })();

  jQuery.event.add(window, "load", jQuery.ready);

结果很明了了，IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执 行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。而 这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。

    $(function(){

        alert(0);

    });

    $(document).ready(function(){

        alert(1)

    });

    (function ($) {

        alert(2);

    })(jQuery);

    $().ready(function() {

        alert(3)

    });

js常见执行方法window.onload = function (){},$(document).ready()的更多相关文章

  1. 菜鸟学JS（五）——window.onload与$(document).ready()

    我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ...

  2. js常见执行方法$(document).load(),$(document).ready()

    $(document).load(); 当web页面以及其附带的资源文件,如CSS,Scripts,图片等,加载完毕后执行此方法.常用于检测页面(及其附带资源)是否加载完毕. $(document). ...

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

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  4. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

  5. window.onload和$(document).ready()比较

    浏览器在页面加载完毕后,JS通常使用window.onload方法为DOM元素添加事件,而jQuery使用的是$(document).ready()方法.两者功能相似,但也有细微差异,下面简要对比一下 ...

  6. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

  7. JS ——window.onload与$(document).ready()

    我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的ready()方法.那么 ...

  8. window.onload()和$(document).ready的区别（ $(document).ready == $(function(){ }) ）

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

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

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

随机推荐

  1. superset----缓存之redis

    一.概述 Superset使用Flask-Cache进行缓存,Flask-Cache支持redis,memcached,simplecache(内存),或本地文件系统)等缓存后端,如果你打算使用mem ...

  2. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  3. #if _MSC_VER &gt; 1000 #pragma once #endif 含义

    前提:MFC应用程序中,MainFrm 类头文件 MainFrm.h 中#if _MSC_VER > 1000#pragma once#endif // _MSC_VER > 1000解释 ...

  4. WebForm 【简单控件】【表单元素】

    一.HTML 表单元素复习 (1)文本类 文本框:<input type="text" name="" id="" value=&qu ...

  5. SQL Server T—SQL 存储过程 触发器

    一.存储过程 存储过程是一组编译在单个执行计划中的T-SQL语句 存储过程:就像函数一样的会保存在数据库中(可编程性) 存储过程的优点: 1.允许模块化程序设计 2.允许更快执行如果某操作需要大量T- ...

  6. Idea无法运行Maven项目

    导入项目到tomcat的时候要选择Arifact 如果maven项目没有这个选项, <groupId>com.bihang</groupId> <artifactId&g ...

  7. windows下给redis添加密码

    在redis的安装目录下找到 redis.windows-service.conf 文件.用文本编辑器打开, 找到requirepass所在行,回车另起一行,输入requirepass 你的密码, # ...

  8. Vue之组件使用(一)

    这仅仅是个人为了防止忘记做的笔记而已,仅供参考,有不对的地方请纠正 组件这种东西用来封装多次使用的控件还是很有用处的,我还是挺喜欢这种模式,优化了前端的工作,写个组件也比较简单.下次有时间记录一下样式 ...

  9. POJ1236(KB9-A 强连通分量)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19326   Accepted: 75 ...

  10. 初识DOM

    初识DOM 一. 节点的获取.插入.创建.删除.替换.修改文本节点 获取 1.document.getElementById 2.(element)document.getElementsByTagN ...