JS，两种在页面加载完成后自动执行的方法（ready，onload）

最新推荐文章于 2024-07-17 21:56:00 发布

Annn_kk

最新推荐文章于 2024-07-17 21:56:00 发布

阅读量2.3w

点赞数 3

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/Annn_kk/article/details/89498884

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS，两种在页面加载完成后自动执行的方法

1.jQuery的ready事件，需要引入jQuery的包才能使用，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

ready可以多次调用，可以绑定多个函数执行，在DOM文档结构加载完毕后，按照绑定顺序执行这些函数，后面函数不会覆盖前面函数的引用。

多种写法

$(function(){ alert(do something); });
 
$(function() {
 $("a").click(function() {
  alert("Hello world!");
 });
})
 
$(document).ready(function(){ alert(do something); })
 
$().ready(function(){ alert(do something); )

2.onload，表示页面包含图片等文件在内的所有元素都加载完成，可以用在HTML的标签中，也可以用在JavaScript中。

一次只能保存对一个函数的引用，会自动用最后面的函数覆盖前面的函数。

//在JavaScript中
window.onload=function(){//do something
}
 
//在<img>使用，图片元素载入完成后，执行某些动作
document.getElementById("imgID").onload=function(){//do something
}

//在 HTML 中，通常用于 <body> 元素
<body onload="JS方法名">

总结：这两个时间的执行顺序，是ready先于load执行，因为ready事件在DOM模型加载完以后就执行了，load事件要等到所有页面元素加载完毕后才执行。

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

弹出离职指引：

window.onload=function(){
    alert("请参见离职指引");
}

$().ready(function(){ 
    alert("请参见离职指引");
})

Annn_kk

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS，两种在页面加载完成后自动执行的方法（ready，onload）

JS，两种在页面加载完成后自动执行的方法1.jQuery的ready事件，需要引入jQuery的包才能使用，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；ready可以多次调用，可以绑定多个函数执行，在DOM文档结构加载完毕后，按照绑定顺序执行这些函数，后面函数不会覆盖前面函数的引用。多种写法$(function(){ alert(do something); }); $(f...
复制链接

扫一扫

专栏目录