1. 程式人生 > 程式設計 >基於javascript原生判斷DOM是否載入完畢

基於javascript原生判斷DOM是否載入完畢

readyState

document.readyState 返回當前文件的狀態,屬性如下:

  • uninitialized 還未開始載入
  • loading 載入中
  • interactive 已載入,文件與使用者可以開始互動
  • complete 載入完成

DOMContentLoaded

當 DOMContentLoaded事件觸發時,僅當DOM載入完成,不包括樣式表,圖片,flash

onload

當 onload 事件觸發時,頁面上所有的DOM,樣式表,指令碼,圖片,flash都已經載入完成了

根據執行時DOM是否已經裝載完畢來決定是對回撥函式進行同步呼叫還是非同步呼叫。具體程式碼如下:

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 ');
 })

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。