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 );
};