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. Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <-错误解决方案

    做项目的时候因为懒,在写service时直接复制了控制器的依赖注入,之后就出现了这个错误,查了半天. 解决其实很简单,删除掉service中注入的$scope即可.

  2. oracle 删除服务sc delete Oracle

    oracle 删除服务sc delete OracleVssWriterorcl -----(oracle orcl vss writer service的服务名!)

  3. linux 安装 nvm

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash 或者 wget -qO- htt ...

  4. Excel上传并读取数据

    最近一段时间,维护一个旧系统,其中有一个功能,是把Excel上传,并读取数据进行维护,然后转插入至SQL数据库中.下面Insus.NET使用asp.net 标准上传控件: <asp:FileUp ...

  5. Spring Security认证配置(三)

    学习本章之前,可以先了解下上篇Spring Security认证配置(二) 本篇想要达到这样几个目的: 1.登录成功处理 2.登录失败处理 3.调用方自定义登录后处理类型 具体配置代码如下: spri ...

  6. Java 支付宝支付,退款,单笔转账到支付宝账户(单笔转账到支付宝账户)

    上次分享了支付宝订单退款的代码,今天分享一下支付宝转账的操作.  现在是有一个余额提现的功能,本来是打算做提现到银行卡的,但是客户嫌麻烦不想注册银联的开放平台账户,就说先提现到支付宝就行,二期再做银行 ...

  7. Android-多线程AsyncTask

    http://www.cnblogs.com/plokmju/p/android_AsyncTask.html AsyncTask,异步任务,可以简单进行异步操作,并把执行结果发布到UI主线程.Asy ...

  8. Java高级工程师需要弄明白的20个知识点

    一般的程序员或许只需知道一些JAVA的语法结构,能对数据库数据进行CRUD就可以应付了.但要成为JAVA(高级) 工程师,就要对JAVA做比较深入的研究,需要不断学习进步,以下对高级工程师需要突破的知 ...

  9. 【学习笔记】--- 老男孩学Python，day2

    今天正式上课的第一天,好害怕.好紧张.好激动.好兴奋! 第一天的课程还算是比较简单吧,因为之前断断续续学的就是这点东西,算是这些都比较熟了吧 今天学习了如下课程: 1. 简单计算机组成 2. pyth ...

  10. 将数据导入MongoDB集群与MySQL

    import sys import json import pymongo import datetime from pymongo import MongoClient client = Mongo ...