window.onload的运用方法

我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏、一些动画效果。我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的ready()方法。那么这 两种方法有什么区别呢?往下看:

onload事件,是在页面中所有元素以及内容全部加载完成以后触发的;而ready()方法,则是在页面的DOM结构加载完毕以后就被触发了。也就是说ready()方法会在onload事件之前执行。


举一个例子:

假设有一个表现图库的页面,这种页面中可能会包含许多大型图像,我们可以通过jQuery隐藏、显示或以其他方式操作这些图像。如果我们通过onload页面设置界面,那么用户在能够使用这个页面之前,必须要等到每一幅图像都下载完成。更糟糕的是,如果行为稍微添加给哪些具有默认行为的元素(比如链接),那么用户的交互可能会导致意想不到的结果。然而当我们试用$(document).ready(){ }进行设置时,这个界面就会更早地准备好可用的正确行为。

使用$(document).ready(){ }一般来说都要优于试用onload事件处理程序,但必须要明确一点的是,因为支持文件可能还没有家在完成,所以类似图像的高度和宽度这样的属性此时不一定有效。

onload事件通常写成如下形式:

function myfunction() {

//your code

};

window.onload = myfunction;

或者:

window.onload = function(){

//your code

};

ready()方法通常如下:

$(document).ready(function(){

//your code

});

或者:

$().ready(function(){

//your code

});

上海领思教育科技有限公司是一家致力于高素质软件开发人才培养的公司,一方面解决企业招不到优秀人才 的困扰,同时为优秀的大学毕业生提供改变命运的机遇。公司自成立以来,一直坚持采用“好老师+好学生+ 好学习气氛”的培养模式,已经培养了一批又一批的IT人才。

上海领思期待您的加盟。

地址:上海市浦东新区临港新城水芸路300号501室

电话:021-58010107

网址:http://www.lingsiedu.cn

简历投递:hr@lingsiedu.cn

再或者:

$(function(){

//your code

});

接下来再看两个例子:

function first(){

alert("first");

}

function second(){

alert("second");

}

window.onload = second;

window.onload = first;

这段代码会弹出“first”。

function first(){

alert("first");

}

function second(){

alert("second");

}

$(document).ready(function(){

first();

});

$(document).ready(function(){

second();

});

上面这段代码会分别弹出“first”和“second”。

为什么会这样呢?因为onload是一个事件,它只能绑定一个值,后面的会覆盖前面的;而ready()是一个方法,方法之间不会互相影响,所以会顺序执行。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,095评论 0 51
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 835评论 0 9
  • 第一部分 准入训练 第1章 进入忍者世界 js开发人员通常使用js库来实现通用和可重用的功能。这些库需要简单易用,...
    如201608阅读 1,420评论 1 2
  • 可能不够美真的配不上爱情吧。
    JenniCat阅读 246评论 0 0
  • 想为你写一首情诗 不写秋去冬来,叶落花败 写就写,春暖花开 缱绻的馥郁 你是那春风一缕 悄悄的吹入了我的心里 吹醒...
    雾江影A王江宗阅读 453评论 0 1

友情链接更多精彩内容