基于javascript原生判斷DOM是否加載完畢
更新時(shí)間：2020年10月14日 09:21:45 作者：酷兒q
這篇文章主要介紹了基于javascript原生判斷DOM是否加載完畢,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
readyState
document.readyState 返回當(dāng)前文檔的狀態(tài)，屬性如下：
- uninitialized 還未開始加載
- loading 加載中
- interactive 已加載，文檔與用戶可以開始交互
- complete 加載完成
DOMContentLoaded
當(dāng) DOMContentLoaded事件觸發(fā)時(shí)，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash
onload
當(dāng) onload 事件觸發(fā)時(shí)，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經(jīng)加載完成了
根據(jù)執(zhí)行時(shí)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)文章
在VS?Code中使用Snippet?Craft擴(kuò)展提高編碼效率的過程詳解
這篇文章主要介紹了在VS?Code中使用Snippet?Craft擴(kuò)展提高編碼效率,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
本文主要介紹了原生JS中Ajax的實(shí)現(xiàn)原理，XMLHttpRequest及promise的概念和流程。需要的朋友可以看下2016-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)馬賽克圖片效果,結(jié)合完整實(shí)例形式分析了JavaScript基于HTML5 canvas圖形元素繪制實(shí)現(xiàn)馬賽克效果相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
兩個(gè)比較有用的Javascript工具函數(shù)代碼
下面我的base.js中的extend函數(shù)可以允許用json格式賦值屬性甚至是函數(shù)句柄2010-02-02
JavaScript實(shí)現(xiàn)班級抽簽小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)班級抽簽小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
XML是一種標(biāo)記語言,用于存儲和傳輸數(shù)據(jù),它是從SGML簡化而來的,XML經(jīng)常被用來在不同的應(yīng)用程序之間或同一個(gè)應(yīng)用程序的不同部分之間交換數(shù)據(jù),同時(shí)還可以用于網(wǎng)絡(luò)應(yīng)用的數(shù)據(jù)配置和信息存儲,在JavaScript中,通常有幾種方法,需要的朋友可以參考下2025-01-01
JS兼容瀏覽器的導(dǎo)出Excel（CSV）文件的方法
項(xiàng)目中經(jīng)常需要導(dǎo)出Excel文件，不在服務(wù)器端處理而是富客戶端采用Javascript腳本處理數(shù)據(jù)并導(dǎo)出文件2014-05-05
JS實(shí)現(xiàn)多物體運(yùn)動的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)多物體運(yùn)動的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript實(shí)現(xiàn)多物體運(yùn)動的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
Bootstrap實(shí)現(xiàn)模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了js刷新頁面location.reload()用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12