window.onload和$(document).ready()的区别

 jQuery库文件是在body元素之前加载的，必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。

在延迟等待加载，JavaScript提供了一个事件为load，方法如下：

window.onload = function () {}; //JavaScript等待加载

$(document).ready(function () {}); //jQuery等待加载l

举一个例子，有一个大型的图库网站，为网页中的所有图片添加某些行为，例如单机图片后让他隐藏或显示。如果使用window.onload方法来处理，那么用户必须等到每一副图片都加载完毕后，才可以进行操作。如果使用jquery中的$(document).ready()方法来进行设置，只要DOM就绪就可以操作了，不需要等待所有图片加载完毕。显然，吧网页解析为DOM树的速度比吧网页中的所有关联文件加载完毕的素的快很多。

 

 

window.onload

$(document).ready()

执行时机

 

必须等待网页全部加载完毕（包括

图片等），然后再执行JS代码

只需要等待网页中的DOM结构

加载完毕，就能执行JS代码

执行次数

 

只能执行一次，如果第二次，那么

第一次的执行会被覆盖

 

可以执行多次，第N次都不会被上

一次覆盖

 

简写方案

无

$(function () {})

 

在实际应用中，window.onload很少直接去使用，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。遇到网速慢或者存在大的图片要下载时，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。