@H_404_0@页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码});
@H_404_0@他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用。但有时候也不尽然。需要进一步查看其内部机制。
@H_4040@那么ready的内部是如何判断DOM的结构加载完的?并且不同的浏览器的判断是如何的?
@H404_0@答案就在jquery代码内,假设jquery的版本是jquery-1.11.3.js。
@H_404_0@ready的关键代码(3507~3566行),关键代码用红色标出:
<div class="jb51code">
<pre class="brush:js;">
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here,but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded",completed,false );
// A fallback to window.onload,that will always work
window.addEventListener( "load",false );
// If IE event model is used
} else {
// Ensure firing before onload,maybe late but safe also for iframes
document.attachEvent( "onreadystatechange",completed );
// A fallback to window.onload,that will always work
window.attachEvent( "onload",completed );
// 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 {
// Use the trick by Diego Perini
// http://javascript.nw<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck,50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};