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

方式一:

通过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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值