您的位置：首页 > 其它

onload什么时候执行

2016-06-25 21:18 274 查看

在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下：

window.onload = function(){// some thing to do};

但是，onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行，而是要等到页面中所引用的图片等外部资源完全下载完成后并且在浏览器中显示才执行，也就是说，如果页面中包括很多图片或者图片很大时将导致onload函数执行时间会被推迟很久，页面中基于 onload的特效或者其它相关内容将并不立刻可用，导致用户体验差。JQUERY的提供了一个自己的类似onload方式，通过该方法实现的页面加载后执行函数将在浏览器构建完DOM树后立刻执行，而并不需要等待图片等外部资源下载完成。

$(function(){//something to do}); （等同于写法$(document).ready() 和 $().ready() ）

在$(document).ready()执行时，整个DOM文档树已经解析完成，即各个DOM元素都已经可以访问了（但是对于某些元素的某些属性此时访问可能还不精确，如图片的宽度高度）

而window.onload会在整个文档都加载完成后才会执行，常见的就是对于页面含很多图片的情况下，必须等到图片都下载下来后才会执行。而$(document).ready()不会。

因此下面的代码中，脚本要放在图片后面才可以正确实现效果；

如：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:960px;
margin:40px auto;
}
</style>
</head>

<body onLoad="imgMove()">
<div>
<img id="img" src="1.jpg" width="960px" height="323px" />
</div>
<script>
var imgshow=new Array();
imgshow[0]="1.jpg";
imgshow[1]="2.jpg";
imgshow[2]="3.jpg";
imgshow[3]="4.jpg";
var i=0;
var img=document.getElementById("img");
function imgMove()
{
if(i>3)i=0;
img.src=imgshow[i];
i++;
setTimeout("imgMove()",400);
}
</script>
</body>
</html>

还可以用window.onload绑定函数，不在<body>里面使用onLoad()事件；

<span style="color:#444444;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:960px;
margin:40px auto;
}
</style>
</head>

<body>
<div>
<img id="img" src="1.jpg" width="960px" height="323px" />
</div>
<script>
var imgshow=new Array();
imgshow[0]="1.jpg";
imgshow[1]="2.jpg";
imgshow[2]="3.jpg";
imgshow[3]="4.jpg";
var i=0;
var img=document.getElementById("img");
</span><span style="color:#ff0000;">window.onload=imgMove();</span><span style="color:#444444;">
function imgMove()
{
if(i>3)i=0;
img.src=imgshow[i];
i++;
setTimeout("imgMove()",400);
}
</script>
</body>
</html>
</span>

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

标签：

相关文章推荐

新的分享

章节导航