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常见执行方法$(document).load(),$(document).ready()的更多相关文章

  1. js 将字符串当作js表达式执行方法

    听同事说了一个需求.他有一个数据对象obj,接口会给他返回一个索引key,这个key长度不固定,根据这个key去修改obj对应的值. 举个例子: let obj={"level1" ...

  2. js常见执行方法window.onload = function (){},$(document).ready()

    1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...

  3. js常见的方法

    Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ ...

  4. 【javascript的那些事】等待加载完js后执行方法

    很多时候,你也许会碰到 使用的情景: js文件b.js还没有从服务器端加载到web端,而吧a.js中已经调用了b.js中的方法 实例: 这里是加载echart的时候碰到的具体实例 引入js " ...

  5. javascript总结1:js常见页面消息输出方式 alert confirm console prompt document

    .1 js常见的输出方法: 1-1 alert 警告框 alert("js语法总结"); 1-2 confirm 确认方法 confirm("js语法总结"); ...

  6. js自执行函数的常见写法

    js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...

  7. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

  8. js 立即执行函数定义方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

随机推荐

  1. Git使用ssh key

    生成ssh key步骤 这里以配置github的ssh key为例: 1. 配置git用户名和邮箱 git config user.name "用户名" git config us ...

  2. MyBatis入门（六）---mybatis与spring的整合

    一.整合需要 1.1.方法 上一章中的数据 需要spring通过单例方式管理SqlSessionFactory spring和mybatis整合生成代理对象,使用SqlSessionFactory创建 ...

  3. Swift开发第三篇——Playground

    本篇分为两部分: 一.Playground的延时运行 二.Playground的可视化 一.Playground的延时运行 Playground 就是提供一个可以即时编译的类似 REPL 的环境,他为 ...

  4. IOS之Foundation--plist简说

    将集合元素通过代码写入plist文件中 主要用来一览代码写入plist文件,在以后的工作中,可能会有字典一样的集合元素,需要你转为plist文件,那么你是选择手动输入plist文件中呢,还是通过以下代 ...

  5. Jmeter调试工具---Debug Sampler

    一.Debug Sampler介绍: 使用Jmeter开发脚本时,难免需要调试,这时可以使用Jmeter的Debug Sampler,它有三个选项:JMeter properties,JMeter v ...

  6. Effective Java 13 Minimize the accessibility of classes and members

    Information hiding is important for many reasons, most of which stem from the fact that it decouples ...

  7. Effective Java 40 Design method signatures carefully

    Principle Choose method names carefully. Don't go overboard in providing convenience methods. Avoid ...

  8. Effective Java 72 Don't depend on the thread scheduler

    Principle Any program that relies on the thread scheduler for correctness or performance is likely t ...

  9. SQL Server 2008 R2——开发资料搜集

    ADO手册 http://download.csdn.net/detail/wlsgzl/8501115 =============================================== ...

  10. POI教程之第二讲：创建一个时间格式的单元格，处理不同内容格式的单元格，遍历工作簿的行和列并获取单元格内容，文本提取

    第二讲 1.创建一个时间格式的单元格 Workbook wb=new HSSFWorkbook(); // 定义一个新的工作簿 Sheet sheet=wb.createSheet("第一个 ...