jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

js中没有document.ready()方法，jquery这小子给我们实现了一个

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

 

我们经常使用window.onload来绑定“页面加载”这个事件，但实际上window.onload会在页面元素全部加在完毕后执行，如果网页上有相当多的图片，我们就会察觉到Javascript执行的延迟。

jQuery为我们提供了一个document.ready方法，用来代替window.onload。

好处
尽管onload事件能够保证绝对不出错，但往往它执行的太晚了，因为它需要在页面元素全部加载完之后执行。
这使得很多页面的JS功能必须等待漫长的图片加载过程，往往用户在页面还没完全打开时已经关闭了页面…悲剧！
使用document.ready方法可以让页面“边下载，边执行”，提供更好的浏览体验。
如：
我们可以将图片预加载放在document.ready中，这样这些图片就不必等到页面加载完毕后再下载。

虽然原生JS没有给我们提供ready方法，但我们也可以自己简单构建一个，尽管没有jQuery中那么强大，但也勉强够用。

document.ready = function(fn) { // 标准浏览器中，我们监听DOMContentLoaded事件来判断DOM加载完毕 if (document.addEventListener) { document.addEventListener("DOMContentLoaded", function() { document.removeEventListener("DOMContentLoaded", fn, false); }, false); } // IE中我们根据document.documentElement.doScroll("left")出错，来判断DOM加载完毕 else { if (document.documentElement.doScroll && window == window.top) (function(){ try { document.documentElement.doScroll("left"); } catch (error) { setTimeout(fn, 0); return; } })(); } }

我们通过document.ready(自己的函数)也就可以在DOM加载完毕时立即调用JS了。
虽然简陋，但毕竟实现了document.ready功能