js判断页面加载完毕方法【js页面加载后执行的几种方式】

最新推荐文章于 2024-06-03 08:50:12 发布

刘一甯儿

最新推荐文章于 2024-06-03 08:50:12 发布

阅读量6.9k

点赞数 5

分类专栏： js 文章标签： js jquery javascript

本文链接：https://blog.csdn.net/weixin_44624073/article/details/106967379

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、纯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结构绘制完毕后就执行，不必等到加载完毕。

本文摘自：

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

https://www.cnblogs.com/gdog/p/10373738.html

刘一甯儿

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
js判断页面加载完毕方法【js页面加载后执行的几种方式】

目录一、纯js方法二、jquery方法三、vue中作用：一、纯js方法// (1)、页面所有内容加载完成执行window.onload = function(){ }// (2)、页面加载完毕document.onreadystatechange = function(){ if(doucument.readyState == 'complete'){ // 页面加载完毕 }}二、jquery方法$(functio.
复制链接

扫一扫