js判斷頁面加載完畢方法

判斷頁面加載完成這個方法是很常見的，下面有三個經常使用的方法，各有利弊。

1、純js方法

// (1)、頁面全部內容加載完成執行
window.onload = function(){
    
}

// (2)、ie9以上版本監聽事件
if('addEventListener' in document){
    document.addEventListener('DOMContentLoaded', function(){
        
    }, false)//false表明在冒泡階段觸發，true在捕獲階段觸發
}

// (3)、頁面加載完畢
document.onreadystatechange = function(){
    if(doucument.readyState == 'complete'){
        // 頁面加載完畢
    }
}

注：js方法沒有依賴方法簡單，但方法(2)存在兼容性問題。

2、jquery方法

$(function(){

})

$(document).ready(function(){
    // document 不寫默認document
})

注：jquery方法兼容性好，而且實在dom資源加載完畢的狀況下執行，（不包括圖片視頻資源）

3、vue中

vue的生命週期，mounted加載完畢執行

mounted () {
  this.$nextTick(() => {
    // 確保dom異步加載完畢
  })
}

做用：

一、在頁面加載完成以前添加加載動畫，提升交互體驗

二、在頁面加載完成後調用js,防止報錯，用戶白屏等待事件