在页面加载完成后执行任务

来源：互联网发布：linux的认识和理解编辑：程序博客网时间：2024/04/29 14:45

方式一：

通过JavaScript注册事件处理程序的传统机制是，把一个函数指定给DOM元素的对应属性。例如，假设我们已经定义了如下函数：
function doStuff(){
//执行某种任务… …
}
那么，我们既可以在HTML标记中指定该函数：<body onload=”doStuff();”>
也可以在JavaScript代码中指定该函数：window.onload=doStuff;
这两种方式都会导致在页面加载完成后执行这个函数。但第2种方式的优点在于，它能使行为更清晰地从标记中分离出来

方式二：

使用jQuery的 ready() 方法。允许使用以下三种语法：

语法1：$(document).ready(function(){
//这里是代码
})

语法2：$().ready(function(){
//这里是代码
})

语法3：$(function(){
//这里是代码
})

方式三：

$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
window.onload = function (){
// 编写代码
}

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

1.执行时间

window.onload会在整个页面的document全部加载完成以后执行。不幸的是这种方式不仅要求页面的DOM tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。更不幸的是，如果外部资源，例如图片需要很长时间来加载，那么页面表现出来的效果就跟我们预期的效果不一样了。

$(document).ready()仅仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行，包括在加载外部图片和资源之前。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。因为.onload属性一次只能保存对一个函数的引用，所以不能在现有的行为基础上再增加新行为。

$(document).ready()可以同时编写多个，并且都可以得到执行。每次调用这个方法都会向内部的行为队列中添加一个新函数，当页面加载完成后，所有函数都将得到执行。而且，这些函数会按照注册它们的顺序依次执行。

1 0