ready与onload

最新推荐文章于 2022-05-02 21:10:28 发布

q0126a

最新推荐文章于 2022-05-02 21:10:28 发布

阅读量97

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript HTML ViewUI

JQuery 专栏收录该内容

10 篇文章

订阅专栏

问题：
首页控制多个图片切换效果js引用时可以正常显示，进入二级页面时切换效果不起作用。

经核查，发现是js加载函数window.onload=function(){}出现了问题，将其改为$(document).ready(function(){}后，问题就解决了！

查阅资料后了解到：

1.window.onload的意思是当页面加载完毕的时候执行，而jquery的ready则是指在页面的DOM模型加载完后执行指定的函数；

2.ready肯定在onload之前发生，页面加载大或者多的图片而使onload执行延后，使用jquery的ready可缓解此问题；

3.可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

测试demo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试用的</title>
</head>
<script type = "text/javascript" src= "jquery-1.3.2.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
	alert(111);
});
$(document).ready(function(){
	alert(112);
});

window.onload = function(){
	alert(222);
}
window.onload = function(){
	alert(223);
}
</script>

<body>

</body>
</html>

测试结果
111  112  223