jQuery中的ready方法實現了當頁面加載完成後才執行的效果,但他並不是window.onload或者doucment.onload的封裝,而是使用 標準W3C瀏覽器DOM隱藏api和IE瀏覽器缺陷來完成的,首先,我們來看jQuery的代碼
DOMContentLoaded = function()
{
//取消事件監聽,執行ready方法
if ( document.addEventListener )
{
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
jQuery.ready();
}
else if ( document.readyState === "complete" )
{
document.detachEvent( "onreadystatechange", DOMContentLoaded );
jQuery.ready();
}
};
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
//表示頁面已經加載完成,直接調用 ready方法
if ( document.readyState === "complete" ) {
//將 jQuery.ready壓入異步消息隊列,設置延遲時間1毫秒(注意,有些瀏覽器延遲不能小於4毫秒)
setTimeout( jQuery.ready);
}
else if ( document.addEventListener ) //
{
//監聽DOM加載完成
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
//這裏是爲了確保所有ready執行結束,如果DOMContentLoaded方法執行了,將有一個狀態值 isReady被設置爲true,因此,
//ready方法一旦執行,那麼將只執行一次,window.addEventListener中的ready 將被 return 中斷
window.addEventListener( "load", jQuery.ready, false );
} else {
//低版本的IE瀏覽器
document.attachEvent( "onreadystatechange", DOMContentLoaded );
window.attachEvent( "onload", jQuery.ready );
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) //剔除iframe的成分
{
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
//根據bug來兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
//由於低版本的IE 瀏覽器,onreadystatechange事件不可靠,因此需要根據各個bug來判斷頁面是否已加載完成
return setTimeout( doScrollCheck, 50 );
}
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
ady: function( wait )
{
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
//判斷頁面是否已完成加載並且是否已經執行ready方法
return;
}
if ( !document.body ) {
return setTimeout( jQuery.ready );
}
jQuery.isReady = true; //指示ready方法已被執行
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
}
readyList.resolveWith( document, [ jQuery ] );
if ( jQuery.fn.trigger ) {
jQuery( document ).trigger("ready").off("ready");
}
},