javascript原生判斷DOM是否加載完畢執行方法

readyState

document.readyState 返回當前文檔的狀態
屬性以下:異步

  1. uninitialized 還未開始加載
  2. loading 加載中
  3. interactive 已加載,文檔與用戶能夠開始交互
  4. complete 加載完成

DOMContentLoaded

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

onload

當 onload 事件觸發時,頁面上全部的DOM,樣式表,腳本,圖片,flash都已經加載完成了spa


根據執行時DOM是否已經裝載完畢來決定是對回調函數進行同步調用仍是異步調用。具體代碼以下:code

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


文章轉載地址:https://www.jianshu.com/p/fe4bea649473blog

相關文章
相關標籤/搜索