js判斷頁面加載完畢方法

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

一、純js方法

// (1)、頁面所有內容加載完成執行 window.onload = function(){ } // (2)、ie9以上版本監聽事件 if('addEventListener' in document){ document.addEventListener('DOMContentLoaded', function(){ }, false)//false代表在冒泡階段觸發，true在捕獲階段觸發 } // (3)、頁面加載完畢 document.onreadystatechange = function(){ if(document.readyState == 'complete'){ // 頁面加載完畢 } } 注：js方法沒有依賴方法簡單，但方法(2)存在兼容性問題。 

二、jquery方法

$(function(){ }) $(document).ready(function(){ // document 不寫默認document }) 注：jquery方法兼容性好，並且實在dom資源加載完畢的情況下執行，（不包括圖片視頻資源） 

三、vue中

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

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

作用：

1、在頁面加載完成之前添加加載動畫，提高交互體驗

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

 

轉：https://www.cnblogs.com/rich23/p/9830648.html