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. 代码统计工具cloc

    https://sourceforge.net/projects/cloc/files/cloc/v1.64/

  2. PowerBuilder编程新思维1：扩展（Lua）

    前言 PowerBuilder作为开发工具退出一线行列已经很久了,在2019年来谈这样一款老旧的编程工具是否有意义?诚然,PB有着太多硬伤,但还是有它的用武之地的.而且今天讲的这个“新思维”大部分内容 ...

  3. ES 入门记录之 match和term查询的区别

    ElasticSearch 系列文章 1 ES 入门之一 安装ElasticSearcha 2 ES 记录之如何创建一个索引映射 3 ElasticSearch 学习记录之Text keyword 两 ...

  4. AutoMapper项目实践

    本次示例,我们单独创建一个 AutoMapperService 的项目,用于放置映射配置文件,映射注册方法,映射公共方法. 1.映射配置文件 用于配置源实体到目标实体的映射 public class ...

  5. 浅谈sql中的in与not in,exists与not exists的区别以及性能分析

    1.in和exists in是把外表和内表作hash连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询,一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表 ...

  6. 撩课-Web大前端每天5道面试题-Day36

    1.介绍一下你对浏览器内核的理解? 主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎. 渲染引擎:负责取得网页的内容(HTML.XML.图像等等) ...

  7. 了解java虚拟机—并行回收器（7）

    并行回收器 新生代ParNew回收器 ParNew只是简单地将串行回收器多线程化,他的回收策略,算法以及参数都喝新生代串行回收器一样.由于并行回收器使用多线程进行垃圾回收,因此,在并发能力强的CPU上 ...

  8. 在mysql中RIGHT JOIN与group by一起使用引起的一个大bug

    本来按理说这个小问题不值得写一个博客的,不过正是这个小问题造成了一个大bug. 本来每月对数据都好好的,但是这一两天突然发现许多数据明显不对,这一块的代码和sql有些不是我写的,不过出现了bug,还是 ...

  9. Tunnel Warfare（hdu1540 线段树）

    Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  10. 使用Spring的AbstractRoutingDataSource类来进行拓展多数据源

    1.继承抽象类AbstractRoutingDataSource 通过重写这个抽象类的determineCurrentLookupKey()方法来决定返回哪个数据库. 2.配置多个数据库 <be ...