基于javascript原生判斷DOM是否加載完畢
更新時間：2020年10月14日 09:21:45 作者：酷兒q
這篇文章主要介紹了基于javascript原生判斷DOM是否加載完畢,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
readyState
document.readyState 返回當(dāng)前文檔的狀態(tài)，屬性如下：
- uninitialized 還未開始加載
- loading 加載中
- interactive 已加載，文檔與用戶可以開始交互
- complete 加載完成
DOMContentLoaded
當(dāng) DOMContentLoaded事件觸發(fā)時，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash
onload
當(dāng) onload 事件觸發(fā)時，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經(jīng)加載完成了
根據(jù)執(zhí)行時DOM是否已經(jīng)裝載完畢來決定是對回調(diào)函數(shù)進(jìn)行同步調(diào)用還是異步調(diào)用。具體代碼如下：
function onReady(fn){
var readyState = document.readyState;
if(readyState === 'interactive' || readyState === 'complete') {
fn()
}else{
window.addEventListener("DOMContentLoaded",fn);
}
}
onReady(function(){
console.log('DOM fully loaded and parsed ');
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript的IE和Firefox兼容性匯編...2006-07-07
js實現(xiàn)點擊復(fù)制當(dāng)前文本到剪貼板功能（兼容所有瀏覽器）
這篇文章主要介紹了js實現(xiàn)點擊復(fù)制當(dāng)前文本到剪貼板功能，兼容所有瀏覽器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了Bootstrap4如何定制自己的顏色和風(fēng)格，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能
本篇文章主要是對JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
javascript setAttribute, getAttribute 在不同瀏覽器上的不同表現(xiàn)
該方法把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個新屬性。2010-08-08
JS動態(tài)添加option和刪除option(附實例代碼)
option的添加和刪除通過js實現(xiàn)及動態(tài)創(chuàng)建select，本例提供實例的完整代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
本文介紹了webpack實現(xiàn)熱加載自動刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JavaScript 函數(shù)的定義-調(diào)用、注意事項
這篇文章主要介紹了JavaScript 函數(shù)的定義-調(diào)用、注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了怎樣使用CocosCreator的游戲手柄，每一個步驟都挺詳細(xì)，資源可以隨便找一些，希望同學(xué)們看完，一定要試一下2021-04-04
這篇文章主要介紹了ES6所改良的javascript“缺陷”問題的相關(guān)資料,需要的朋友可以參考下2016-08-08