js判断页面加载完毕方法【js页面加载后执行的几种方式】
目录一、纯js方法二、jquery方法三、vue中作用:一、纯js方法// (1)、页面所有内容加载完成执行window.onload = function(){}// (2)、页面加载完毕document.onreadystatechange = function(){if(doucument.readyState == 'complete'){// 页面加载完毕}}二、jquery方法$(fu
·
目录
一、纯js方法
// (1)、页面所有内容加载完成执行
window.onload = function(){
}
// (2)、页面加载完毕
document.onreadystatechange = function(){
if(doucument.readyState == 'complete'){
// 页面加载完毕
}
}
二、jquery方法
$(function(){
})
$(document).ready(function(){
// document 不写默认document
})
注:
(1)jquery方法兼容性好,并且实在dom资源加载完毕的情况下执行,(不包括图片视频资源)
(2)第1种是第2种的简写方式。两个是document加载完成后就执行方法
(3)window.onload = function(){};都是等到整个window加载完成执行方法体。是使用dom对象
(4)执行顺序
1.)第1种和第2种无论放在哪里都是最先执行,window.onload = function(){};在其之后执行,“在标签上静态绑定onload事件,<body onload="aaa()">等待body加载完成,就会执行aaa()方法/函数”最后执行
三、vue中
vue的生命周期,mounted加载完毕执行
mounted () {
this.$nextTick(() => {
// 确保dom异步加载完毕
})
}
作用:
1、在页面加载完成之前添加加载动画,提高交互体验
2、在页面加载完成后调用js,防止报错,用户白屏等待事件
赘述:
window.onload:必须等到页面bai内包括图片的所有元素加载完毕后才能执行。
$(document).ready():是DOM结构绘制完毕后就执行,不必等到加载完毕。
本文摘自:
更多推荐
已为社区贡献1条内容
所有评论(0)