window.onload和$(document).ready有什么區(qū)別?document.onDOMContentLoaded呢?

window.onload和$(document).ready都是頁面加載時(shí)我們就去執(zhí)行一個(gè)函數(shù)或者動(dòng)作,具體細(xì)節(jié)上還是有區(qū)別的
最基本區(qū)別
1.執(zhí)行時(shí)間
window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后再去執(zhí)行。
$(document).ready()時(shí)DOM結(jié)構(gòu)回執(zhí)完畢后就執(zhí)行,不必等到加載完畢。
2.編寫個(gè)數(shù)不同
window.onload不可同時(shí)編寫多個(gè),如果有多個(gè)window.onload方法,只會(huì)執(zhí)行一個(gè)
$(document).ready()可以同時(shí)編寫多個(gè),并且可以得到執(zhí)行
3.簡(jiǎn)化寫法
window.onload沒有簡(jiǎn)化寫法
$(document).ready(function(){})可以簡(jiǎn)寫成$(function(){});
$(document).ready()方法和window.onload方法有相似的功能,但是在執(zhí)行時(shí)機(jī)方面是有區(qū)別的。window.onload方法是在網(wǎng)頁中所有的元素(包括元素的關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行,即JavaScript此時(shí)才可以訪問網(wǎng)頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊(cè)的事件處理程序,可以在DOM完全就緒時(shí)就可以被調(diào)用。此時(shí),網(wǎng)頁的所有元素對(duì)jQuery而言都是可以訪問的,但是,這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。

舉一個(gè)例子,有一個(gè)大型的圖庫網(wǎng)站,為網(wǎng)頁中所有圖片添加某些行為,例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來處理,那么用戶必須等到每一幅圖片都加載完畢后,才可以進(jìn)行操作。如果使用jQuery中的$(document).ready()方法來進(jìn)行設(shè)置,只要DOM就緒時(shí)就可以操作了,不需要等待所有圖片下載完畢。很顯然,把網(wǎng)頁解析為DOM樹的速度比把網(wǎng)頁中的所有關(guān)聯(lián)文件加載完畢的速度快很多。

另外需要注意一點(diǎn),由于在$(document).ready()方法內(nèi)注冊(cè)的事件,只要DOM就緒就會(huì)被執(zhí)行,因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的HTML下載完畢,并且已經(jīng)解析為DOM樹了,但很有可能圖片還未加載完畢,所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問題,可以使用JQuery中另一個(gè)關(guān)于頁面加載的方法——load()方法。load()方法會(huì)在元素的onload事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給window對(duì)象,則會(huì)在所有內(nèi)容(包括窗口、框架、對(duì)象和圖像等)加載完畢后觸發(fā),如果處理函數(shù)綁定在元素上,則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。

document.onDOMContentLoaded在頁面中觸發(fā)[DOMContentLoaded]事件時(shí)觸發(fā)。此時(shí),文檔被加載和解析,并且DOM被完全構(gòu)造,但鏈接的資源(例如圖像,樣式表和子幀)可能尚未被加載。

?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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