您的位置：首页 > Web前端 > JQuery

Jquery和js的页面加载完成执行的几种方式和区别

2018-02-09 14:31 561 查看

$(window).load()

、

window.onload=function(){}

和

$(document).ready()

（

$(function() {})

）的区别

1.执行时间

$(window).load() 是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；

window.onload=function(){}  是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；

$(document).ready()和$(function() {})  是DOM结构绘制完毕后就执行，不必等到加载完毕；

2.编写个数不同

$(window).load() 多个，按顺序执行；

window.onload=function(){} 一个，最后一个执行，前面的都会覆盖；

$(document).ready()和$(function() {})  多个，按顺序执行；

测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<<
4000
span class="hljs-title">title></title>
</head>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
alert("$(document)===1");
});
$(document).ready(function() {
alert("$(document)===2");
});

$(window).load(function(){
alert("onload1");
});
$(window).load(function(){
alert("onload2");
});

window.onload = function() {
alert("onload3");
}
window.onload = function() {
alert("onload4");
}
</script>
<body>
<p>
弹出结果：
$(document)===1
$(document)===2

onload1
onload2

onload4
</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery和js的页面加载完成执行的几种方式和区别

$(window).load()、window.onload=function(){}和$(document).ready()（$(function() {})）的区别

$(window).load()
、
window.onload=function(){}
和
$(document).ready()
（
$(function() {})
）的区别