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'