谈谈document.ready和window.onload的区别

     在JQuery中，我们可以看到有两种写法：$(function(){}) 和$(document).ready(function(){})。

这两个方法效果一样，都是在dom文档树加载完之后执行的一个函数（这里的dom文档树，并不代表全部文件加载完）。

    而window.onload是在dom文档树和所有文件加载完之后执行的一个函数。所以，$(document).ready(function(){})是比window.onload先执行。

 

     我们来看下JQuery内部，$(document).ready(function(){})是如何实现的:

 

    document.ready=function(callback){

        //兼容FF，Google

        if(document.addEventListener){

            document.addEventListener('DOMContentLoaded',function(){

                document.removeEventListener('DOMContentLoaded',arguments.callee,false);

                callback();

            },false)

         //兼容IE

        }else if(document.attachEvent){

            document.attachEvent('onreadystatechange',function(){

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

                    document.detachEvent("onreadystatechange",arguments.callee);

                    callback();

                }

            })

        }else if(document.lastChild==document.body){

            callback();

        }

    }

 

document.ready  函数实现了，下面来验证两个函数哪个先执行：

window.onload=function(){

        alert('onload');

    };

    document.ready(function(){

        alert('ready');

 

    })

 

执行之后，会发现先弹出 ready 再弹出 onload。

 

转载自：http://www.cnblogs.com/a546558309/p/3478344.html