$(document).ready()和window.onload的区别

发表于 2012-08-29admin

以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。

$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的。 window.onload方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任 何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序,可以在DOM完全就绪时就可以被调用。此时,网页的所有 元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。

举一个例子,有一个大型的图库网站,为网页中所有图片添加某些行为,例如单击图片后让它隐藏或显示。如果使用window.onload方法来处 理,那么用户必须等到每一幅图片都加载完毕后,才可以进行操作。如果使用jQuery中的$(document).ready()方法来进行设置,只要 DOM就绪时就可以操作了,不需要等待所有图片下载完毕。很显然,把网页解析为DOM树的速度比把网页中的所有关联文件加载完毕的速度快很多。

另外需要注意一点,由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载 完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要 解决这个问题,可以使用JQuery中另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。 如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载 完毕后触发。jQuery代码如下:

$(window).load(function(){
    //编写代码})

等价与javaScript中的以下代码:

window.onload =function(){
    //编写代码}

假设网页中有两个函数,JavaScript代码如下:

function one(){
    alert("one");}function two(){
    alert("two");}

当网页加载完毕后,通过Javascript代码来分别调用one函数和two函数:

window.onload = one;
window.onload = two;

然而当运行代码后,发现只弹出字符串“two”对话框。

字符串“one”对话框不能被弹出的原因是JavaScript的onload事件一次只能保存在一个函数的引用,它会自动用后面的函数覆盖前面的函数,因此不能在现有的行为上添加新的行为。

为了达到两个函数顺序触发的效果,只能在创建一个新的JavaScript方法来实现,JavaScript代码如下:

window.onload =function(){
    one();
    two();}

虽然这样编写的代码能解决某些问题,但还是不能满足某些需求,例如有多个JavaScript文件,每个文件都需要用到window.onload方法,这种情况下用上面提到的方法编写代码会非常麻烦。你可以参考Javascript共享onload事件,而jQuery的$(document).ready()方法能够很好地处理这些情况,每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。例如如下jQuery代码:

function one(){
    alert("one");}function two(){
    alert("two");}
$(document).ready(function(){
    one();});
$(document).ready(function(){
    two();})

运行代码后,会弹出字符串“one”对话框,然后弹出字符串“two”对话框。

加载window事件的更多相关文章

  1. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  2. JS 页面加载触发事件 document.ready和onload的区别(转)

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  3. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  4. javascript不依赖JS加载顺序事件对象实现

    背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...

  5. JS 页面加载触发事件 document.ready和onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  6. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  7. 二级ul li元素动态加载click事件

    一.代码 html代码: <ul class="id1" id="id1" style="width:84%; height:75%;overf ...

  8. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  9. js页面加载完成事件

    jquery的一种简写形式: $(function(){ alert("页面加载完成!"); });  其对应的完整形态为: $(document).ready(function( ...

随机推荐

  1. Android OpenGL ES(一)OpenGL ES介绍

    在学习Android OpenGL ES开发之前,你必须具备Java 语言开发经验和一些Android开发的基本知识,但并不需要有图形开发的经验,本教程也会涉及到一些基本的线性几何知识,如矢量,矩阵运 ...

  2. this与super使用总结(java)

    this: Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是this.因此,this只能在类中的非静态方法 ...

  3. POJ 1523 SPF (去掉割点能形成联通块的个数)

    思路:使用tarjan算法求出割点,在枚举去掉每一个割点所能形成的联通块的个数. 注意:后来我看了下别的代码,发现我的枚举割点的方式是比较蠢的方式,我们完全可以在tarjan过程中把答案求出来,引入一 ...

  4. jquery_api(事件一)

    一 .unload在火狐,谷歌无法弹出alerta是因为这两个浏览器默认组织alert弹出,unload事件可以进行一些对象销毁,事件解除绑定等清理工作. 如果你想在用户离开页面之前确认是否离开,最好 ...

  5. Python 安装matplotlib,six,dateutil,pyparsing 完整过程

    [摘要:正在做词频剖析的时间,须要用matlotlib 做图表,柱状图啥的,因而便最先了一个又一个的装置库的进程 由于matplotlib 须要依附很多其他科教盘算的第三圆库,须要一个一个的装置了.. ...

  6. 判断浏览器增加标签 encodeURIComponent

    var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; var lx; (s = ua.match(/msie ([\d.]+ ...

  7. ZEN_CART_如何添加自定义页面

    按照下面的路径,添加自己的文件,就OK了 以about us页面为例, 默认模板 \includes\templates\template_default\templates\tpl_about_us ...

  8. Entity Framework 学习初级篇7--基本操作:增加、更新、删除、事务

    本节,直接写通过代码来学习.这些基本操作都比较简单,与这些基本操作相关的内容在之前的1至6节基本介绍完毕. l           增加: 方法1:使用AddToXXX(xxx)方法:实例代码如下: ...

  9. vm选项大全

    http://hllvm.group.iteye.com/group/topic/27945 java -XX:后边的总记不住 vm选项大全 http://www.oracle.com/technet ...

  10. Integer自动装箱拆箱bug,创建对象在-128到127

    1 public class Demo3 { public static void main(String[] args) { Integer a = 1; Integer b = 2; Intege ...