js判断页面加载完毕方法

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

相关推荐

与字的成语有哪些
365完美体育

与字的成语有哪些

📅 07-11 👁️ 3537
Partykit 是一款基于AI的派对策划工具,提供个性化派对套装,包括服装、装饰、食谱、鸡尾酒、活动和播放列表,让您的派对成为难忘的回忆。
地下城100级时间引导石获得途径,狗眼兑换最划算
一文看懂日本寿司:历史、种类和吃法
365完美体育

一文看懂日本寿司:历史、种类和吃法

📅 08-17 👁️ 5672
努力把阳明网校办成线上教育的排头兵
365_体育投注英超和欧冠

努力把阳明网校办成线上教育的排头兵

📅 08-16 👁️ 6176
繪製矩形的步驟
mobile365体育

繪製矩形的步驟

📅 08-02 👁️ 4443
卡塔尔世界杯现场记者连续猝死!48小时爆两桩惨剧,目击者揭死亡过程,外网愤怒
《LOL》历年冠军皮肤介绍 每个赛季的最强者
365_体育投注英超和欧冠

《LOL》历年冠军皮肤介绍 每个赛季的最强者

📅 07-01 👁️ 4403
痔疮动物模型制作方法的研究.doc
365_体育投注英超和欧冠

痔疮动物模型制作方法的研究.doc

📅 07-13 👁️ 4904