談?wù)刣ocument.ready和window.onload的區(qū)別

在Jquery里面,我們可以看到兩種寫(xiě)法:$(function(){}) 和$(document).ready(function(){})

這兩個(gè)方法的效果都是一樣的,都是在dom文檔樹(shù)加載完之后執(zhí)行一個(gè)函數(shù)(注意,這里面的文檔樹(shù)加載完不代表全部文件加載完)。

而window.onload是在dom文檔樹(shù)加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)。也就是說(shuō)$(document).ready要比window.onload先執(zhí)行。

那么Jquery里面$(document).ready函數(shù)的內(nèi)部是怎么實(shí)現(xiàn)的呢?下面我們就來(lái)看看:

我們來(lái)為document添加一個(gè)ready函數(shù):

document.ready =function(callback) {///兼容FF,Googleif(document.addEventListener) {

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

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

callback();

},false)

}//兼容IEelseif(document.attachEvent) {

document.attachEvent('onreadystatechange',function() {if (document.readyState == "complete") {

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

callback();

}? ? ? ? ? ? ? ? })? ? ? ? ? ? }elseif(document.lastChild ==document.body) {

callback();

}

document.ready這個(gè)函數(shù)是實(shí)現(xiàn)了。我們?cè)賮?lái)驗(yàn)證一下最上面所說(shuō)的“ready要比onload先執(zhí)行”

window.onload =function() {

alert('onload');

};

document.ready(function() {

alert('ready');

});

執(zhí)行這段代碼之后,你會(huì)看到瀏覽器里面會(huì)先彈出“ready”,在彈出onload。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 五十三:請(qǐng)解釋 JavaScript 中 this 是如何工作的。1.方法調(diào)用模式當(dāng)一個(gè)函數(shù)被保存為一個(gè)對(duì)象的屬性...
    Arno_z閱讀 683評(píng)論 0 2
  • DOMContentLoaded與load的區(qū)別 在js中DOMContentLoaded方法是在HTML文檔被完...
    傳奇狗閱讀 2,340評(píng)論 2 5
  • 第一部分 準(zhǔn)入訓(xùn)練 第1章 進(jìn)入忍者世界 js開(kāi)發(fā)人員通常使用js庫(kù)來(lái)實(shí)現(xiàn)通用和可重用的功能。這些庫(kù)需要簡(jiǎn)單易用,...
    如201608閱讀 1,407評(píng)論 1 2
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,497評(píng)論 0 2
  • 數(shù)據(jù)結(jié)構(gòu)與算法 棧和隊(duì)列的區(qū)別 網(wǎng)絡(luò)基礎(chǔ) HTTP 無(wú)狀態(tài)怎么理解 可以從REST的角度來(lái)理解這個(gè)問(wèn)題。我們知道R...
    笑極閱讀 736評(píng)論 1 5

友情鏈接更多精彩內(nèi)容