$(document).ready()与window.onload的区别

最新推荐文章于 2024-07-24 16:53:23 发布

晓梦_知行

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量404

点赞数 1

分类专栏： jquery 文章标签： html ready onload

本文链接：https://blog.csdn.net/csdn_ds/article/details/73498400

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

执行时间不同

$(document).ready()是在浏览器已经解析完整个html文档，dom树已经建立起来，但像图片等资源文件还没有加载之前的时候执行的。

window.onload是在整个页面所有元素（包括图片，引用文件）加载完成后执行。

综上所述，可知，ready是在load之前执行。

在此说明一下$(document).ready()的简写形式：$(function(){})

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>onload ready 加载顺序</title>
	<script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
	<img src="https://img.alicdn.com/imgextra/i1/738517069/TB2mpLRnr4npuFjSZFmXXXl4FXa_!!738517069.jpg" width="100px" height="100px"/>
</body>
<script type="text/javascript">
window.οnlοad=function(){
	console.log("window onload");
};

$(document).ready(function(){
	console.log("document ready");
});
</script>
</html>

结果：

document ready

window onload

执行次数不同

$(document).ready()可以在javascript代码中出现多次，并且里面的函数或代码都可以得到执行。

window.onload只能在javascript代码中出现一次，如果有多个window.onload,那么只有最后一个window.onload里面的函数或代码才会被执行，之前的window.onload都将被覆盖。

此处提一下jQuery中的$(window).load(function(){})，功能和window.onload一样，但它可以在javascript代码中多次出现，每个都会被执行。

onload代码也可以作用于标签上：如：

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>onload ready 加载顺序</title>
	<script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
	<img src="https://img.alicdn.com/imgextra/i1/738517069/TB2mpLRnr4npuFjSZFmXXXl4FXa_!!738517069.jpg" width="100px" height="100px"/>
</body>
<script type="text/javascript">
window.οnlοad=function(){
	console.log("window onload1");
};
window.οnlοad=function(){
	console.log("window onload2");
};
window.οnlοad=function(){
	console.log("window onload3");
};
window.οnlοad=function(){
	console.log("window onload4");
};


$(window).load(function(){
	console.log("window load1");
});
$(window).load(function(){
	console.log("window load2");
});

$(function(){
	console.log("document ready1");
});
$(function(){
	console.log("document ready2");
});
$(function(){
	console.log("document ready3");
});
$(function(){
	console.log("document ready4");
});
</script>
</html>

结果：

document ready1

document ready2

document ready3

document ready4

window onload4

window load1

window load2

总结

一般建议能用$(document).ready()的不用window.onload,这样整个html页面的交互感要好，不会因为加载图片太慢，阻碍js的执行。但有些情况，可能要等页面的所有东西都加载完成后才可执行，此时就必须选用window.onload。

晓梦_知行

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$(document).ready()与window.onload的区别

1、执行时间不同$(document).ready()是在浏览器已经解析完整个html文档，dom树已经建立起来，但像图片等资源文件还没有加载之前的时候执行的。window.onload是在整个页面所有元素（包括图片，引用文件）加载完成后执行。综上所述，可知，ready是在load之前执行。在此说明一下$(document).ready()的简写形式：$(function(){})
复制链接

扫一扫

专栏目录