jQuery $(document).ready() 与 window.onload 执行机制与区别详解

执行时间与编写个数差异

执行时间

window.onload 必须等待页面内所有元素（包括图片）完全加载完毕后才会执行。相比之下，$(document).ready() 在 DOM 结构绘制完成后即可执行，无需等待其他资源加载完毕。

编写个数不同

window.onload 不能同时定义多个处理函数，若存在多个，仅最后一个会生效。而 $(document).ready() 允许同时编写多个处理函数，且所有函数均能得到执行。

简化写法

window.onload 没有简化的语法形式。$(document).ready(function(){}) 可以简写为 $(function(){});。

$(document).ready(function(){
  // 执行代码
});
或者
$(function(){
  // 执行代码
});

简化写法与使用场景

在以往的开发实践中，我通常采用 jQuery 的模式，大多数情况下代码的第一行会写：

$(document).ready(function(){
...
});

此时无需等待所有 JavaScript 代码和图片加载完毕即可执行相关方法。不过，在某些特定场景下，必须等待所有

元素加载完成后，才能执行某些操作。例如，若部分图片或其他资源尚未加载完成，此时点击某些按钮可能会导致意外情况。在这种情况下，就

需要使用以下代码：

$(window).load(function () 
{
  $("#btn-upload").click(function ()
  {
    //比如说：
    uploadPhotos();
  });
});

$(window).load 与 body.onload 对比

以下是转载的内容，

使用 $(window).load(function(){...}) 而不用 body.onload() 的几个理由。首先，它们都是在页面所有元素（包括 HTML 标签以及引用的所有图片、Flash 等媒体）加载完毕后执行的，这是它们的共同点。

不使用 body.Onload() 的理由1：

如果我们希望同时加载多个函数，必须这样编写：

<body onload="fn1(),fn2()"></body>，这种写法看起来非常不美观。如果使用 $(window).load()，我们可以这样加载多个函数：

$(window).load(function () 
{
  alert("hello,我是jQuery!");
});
$(window).load(function () 
{
  alert("hello,我也是jQuery");
});

这样编写会按从上到下的顺序执行这两个函数，且代码结构更加清晰美观。

不使用 body.Onload() 的理由2：

使用 body.Onload() 无法实现 JavaScript 与 HTML 的完全分离，这是一个严重的问题。

另外，使用 $(window).load(function(){...}) 和 body.onload() 都存在同样的问题，因为前文已提到，它们都需要等待页面的所有内容

加载完毕后才执行。然而，当网速较慢时，加载一个页面往往需要较长时间（几秒到十几秒不等，甚至更长……）。因此，我们经常会

遇到页面尚未完全加载完毕，而用户已经开始操作页面的情况。此时页面表现出的效果可能与预期不符。

因此，这里推荐使用 $(document).ready(function(){})，或简写为 $(function(){})，因为它会在页面的 DOM 元素加载完毕后立即执行，

而无需等待图片或其他媒体资源下载完毕。

但是，有时我们确实需要等待页面所有内容加载完成后再执行目标函数。因此，是使用 $(window).load(function(){...}) 还是

使用 $(function(){})，往往需要结合具体需求做出不同选择。

最后附上一段在所有 DOM 元素加载之前执行的 jQuery 代码

<script type="text/javascript">
(function() {
      alert("DOM还没加载哦!");
    })(jQuery)
 </script>

呵呵，有时候我们也有这个需求！

执行机制与源码分析

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过 JavaScript 为 DOM 元素添加事件。在常规的 JavaScript 代码中，通常使用 window.onload 方法，而在 jQuery 中，使用的是 $(document).ready() 方法。$(document).ready() 方法是事件模块中最重要的一个函数，可以极大地提高 Web 应用程序的速度。

window.load $(document).ready()

执行时机：必须等待网页中所有内容加载完毕后（包括图片）才能执行；网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的内容并没有加载完。编写个数：不能同时编写多个。以下代码无法正确执行：

window.onload = function(){ 
 alert(“text1”); 
}; 
window.onload = function(){ 
 alert(“text2”); 
}; 

结果只输出第二个。能同时编写多个。以下代码正确执行：

$(document).ready(function(){ 
 alert(“Hello World”); 
}); 
$(document).ready(function(){ 
 alert(“Hello again”); 
}); 

结果两次都输出。简化写法：无。

 $(function(){ 
 // do something 
}); 

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

$(window).load(function (){ 
    // 编写代码 
});

等价于 JavaScript 中的以下代码

Window.onload = function (){ 
   // 编写代码 
}

Frame 嵌入场景下的浏览器差异

最近在修改一个嵌入在 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 绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。

以上就是本文的全部内容，了解更多 jQuery 的语法，大家可以查看：《jQuery 1.10.3 在线手册》，也希望大家多多支持本站。