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. 来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'appkey' 无效）。

    1.服务端: web.config文件中: <system.webServer> <httpProtocol> <customHeaders> <add na ...

  2. Button 对 TreeView1 所有节点的全选

    protected void Button1_Click(object sender, EventArgs e)    {        for (int i = 0; i < this.Tre ...

  3. 转：EClipse 10个最有用的快捷键

    Eclipse快捷键 10个最有用的快捷键 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代 ...

  4. virtualbox虚拟机迁移出现"connot find device eth0"错误

    我在自己的机器上面配置virtualbox虚拟机完毕以后,移植到另外一台机器上面,登陆页面总是在检查network,并且最后网络加载失败,不论我是用桥接还是NAT方式连接.登陆系统以后,我尝试连接网络 ...

  5. iOS菜单滚动联动内容区域功能实现

    平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果:本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用: 效果 ...

  6. UnityShader之Shader格式篇【Shader资料1】

    关于Shader,在Unity里面我们一般叫做ShaderLab,只要你的职业是与渲染搭边,Unity就与ShaderLab有着直接的关联,你都应该试着去学会它,其实我们在新手未有入门的时候,我们总是 ...

  7. C语言-12-日期和时间处理标准库详细解析及示例

    概述 标准库 提供了用于日期和时间处理的结构和函数 是C++语言日期和时间处理的基础 与时间相关的类型 clock_t,本质是:unsigned long typedef unsigned long ...

  8. bootstrap3 兼容IE8浏览器

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...

  9. docker入门(1) Centos 7 下docker的安装

    centos 7安装docker 什么是 Docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go ...

  10. 关于EditText的一点深入的了解

    最近在开发android下的记事本程序时,频繁的使用EditText控件,折腾来折腾去,算是对其的了解更深入了一些.特将这些收获记录如下: 一.几个属性的介绍 android:gravity=&quo ...