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

这篇作为我的新的起点开始吧，发现年纪大了，记性就不好了，有些东西老是记了忘，忘了百度。在学一些新知识的时候也是这样的毛病，总是重复学习，这样效率真心差！所以决定开始认真写博客！

本来想封装一个预加载的插件的，在开始写时，才发现自己很多不足。百度上看见这个题目，发现自己不会，所以记下！

window.onload 与 jq的 $(document).ready()

window.onload 是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源），执行一个函数。

问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

$(document).ready() 是当DOM文档树加载完成后执行一个函数（不包含图片，css等），所以比window.onload较快执行

那我们来看看$(document).ready()是如何实现的吧

window.onload = function(){
alert('onload');
}

document.ready = function(callback){
//兼容ff,chrome
if(document.addEventListener){
document.addEventListener('DomContentLoader',function(){

document.removeEventListener('DomContentLoader',arguments.callee,false);
callback();
},false);
}
//兼容ie
else if(document.attachEvent){
document.attachEvent('onreadystatechange',function(){

if(document.readyState == 'complete'){

document.detachEvent('onreadystatechange',arguments.callee);
callback();
}
});
}
}

document.ready = function(){
alert('lalala');
}

　　　　//最终你会发现会首先弹出'lalala'