js判断页面加载完毕方法

时间:2023-03-08 16:20:43
js判断页面加载完毕方法

判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊。

一、纯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)存在兼容性问题。

二、jquery方法

$(function(){

})

$(document).ready(function(){
// document 不写默认document
}) 注:jquery方法兼容性好,并且实在dom资源加载完毕的情况下执行,(不包括图片视频资源)

三、vue中

vue的生命周期,mounted加载完毕执行

mounted () {
this.$nextTick(() => {
// 确保dom异步加载完毕
})
}

作用:

1、在页面加载完成之前添加加载动画,提高交互体验

2、在页面加载完成后调用js,防止报错,用户白屏等待事件