jquery源码解析之ready与load事件

1.DOM加载的步骤

    网页渲染的过程主要分为以下几步：1.解析HTML结构；2.加载外部脚本和样式表文件3.解析并执行脚本代码；4.构造HTML DOM模型；5加载图片等外部文件；6.页面加载完毕。ready主要是在第4步完成之后执行的，load要在第6步完成之后执行。所以是ready先执行load后执行。

2.jQuery中ready事件

ready: function( fn ) {    // 添加回调函数    jQuery.ready.promise().done( fn );    return this;}jQuery.ready.promise = function( obj ) {    if ( !readyList ) {        readyList = jQuery.Deferred();         //判断页面是否已经全部加载完成，直接调用ready方法        if ( document.readyState === "complete" ) {            // Handle it asynchronously to allow scripts the opportunity to delay ready            setTimeout( jQuery.ready, 1 );        // 标准浏览器支持DOMContentLoaded        } else if ( document.addEventListener ) {            // 监听DOM是否已经加载完成            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );            // A fallback to window.onload, that will always work            window.addEventListener( "load", jQuery.ready, false );        // If IE event model is used        } else {            // 针对于低版本的IE浏览器            document.attachEvent( "onreadystatechange", DOMContentLoaded );            // A fallback to window.onload, that will always work            window.attachEvent( "onload", jQuery.ready );            // If IE and not a frame            // continually check to see if the document is ready            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll ) {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                                           top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        // and execute any waiting functions                        jQuery.ready();                    }                })();            }        }    }    return readyList.promise( obj );};