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,防止报错，用户白屏等待事件