`

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

阅读更多

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

 

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

 

2.编写个数不同

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个

$(document).ready()可以同时编写多个,并且都可以得到执行

 

3.简化写法

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

 

在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

$(document).ready(function(){
     ...
});

        这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法。

不过有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就需要用到: 

$(window).load(function() {
         $("#btn-upload").click(function(){   //比如说:
                uploadPhotos();
          });
});

        用$(window).load(function(){...})而不用body.onload()的几个理由如下

首先它们都是在页面所有元素(包括html标签以及引用到得所有图片、Flash等媒体)加载完毕后执行的,这是它们的共同点。

 

不用body.onload()理由1

如果我们想同时加载多个函数,我们必须这样写

<body onload="fn1(),fn2()"></body>看起来既不美观、也不方便后期项目维护,如果用$(window).load()我们可以这样加载多个函数,代码如下:

$(window).load(function() {
            alert("hello,我是jQuery!");
  });
 $(window).load(function() {
        alert("hello,我也是jQuery");
 });

        这样写它会从上往下执行这两个函数,并且看起来漂亮多了。

 

不用body.onload()理由2:

用body.onload()不能够做到js和html的完全分离,这是一个很严重的问题(会影响项目的后期维护)。

另外用$(window).load(function(){...})和body.onload()都存在同样一个问题:它们都需要等到页面的所有内容加载完毕才执行。 

但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,所以在这种情况下推荐使用$(document).ready(function(){}),或简写为$(function(){}),因为他会在页面的dom元素加载完毕后就执行,而无需等到图片或其他媒体下载完毕。

但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是该使用$(function(){})往往需要结合具体需要而作不同的选择

最后附上一段在所有DOM元素加载之前执行的jQuery代码:

<script type="text/javascript">
       (function() {
               alert("DOM还没加载哦!");
        })(jQuery)
  </script>

 window.onload不能同时编写多个,若存在多个,则只会执行最后一个:

window.onload = function(){ 
          alert(“text1”); 
}; 
window.onload = function(){ 
         alert(“text2”); 
};

 上面的代码只会执行第二个,仅有一个弹出框:text2。

 但是,如果存在多个$(document).ready,那么会依次执行:

$(document).ready(function(){ 
          alert(“Hello World”); 
}); 
$(document).ready(function(){ 
          alert(“Hello again”); 
}); 

 上面这段代码,会依次弹出:Hello World、Hello again。

 

说明:

由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法:

Load() 方法会在元素的 onload 事件中绑定一个处理函数

如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发;

如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

 

最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了。

  起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了,还不见jquery的效果出来。

  删了onload加载的方法试试,结果还是一样,看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢?接着调试,发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行,而Firefox则是先执行$(document).ready()的内容,再执行原来的onload方法。这个和网上的说法似乎不完全一致啊,呵呵,有点意思、、、、、

  翻翻jquery的源码看看$(document).ready()是如何实现的吧: 

if ( jQuery.browser.msie && window == top ) (function(){ 
        if (jQuery.isReady) return; 
        try { 
                document.documentElement.doScroll("left"); 
        } catch( error ) { 
      setTimeout( arguments.callee, 0 ); 
       return; 
   } 
   // and execute any waiting functions 
   jQuery.ready(); 
})(); 

jQuery.event.add( window, "load", jQuery.ready );

 结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。

对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。

以上就是本文的全部内容,了解更多jQuery的语法,大家可以查看:《jQuery 1.10.3 在线手册》。

 

 

参考文章地址:http://www.jb51.net/article/21628.htm

 

 

 

 

 

 

0
0
分享到:
评论

相关推荐

    JQuery下关于$.Ready()的分析

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...

    一张表格告诉你windows.onload()与$(document).ready()的区别

    在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。   [removed]() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。 页面中所有HTML DOM,CSS DOM结构...

    onload和jquery运行顺序

    window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })

    JQuery Tips相关(1)—-关于$.Ready()

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法  接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.  对于Body的Onload...

    初始jQuery

    3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊:包含$符号和连缀操作 6. 每个页面都有对应的DOM模型,DOM模型包括...

    窗口和表单事件.pptx

    1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...

    图库新版jQuery焦点图 JS代码

    tips[25] = '个人行为与小规模配合压根不需要流程与规范,当交付结果需要大规模的应用时,同一的规格就显得非常重要了。'; tips[26] = '任何创作活动都是为了满足一定的需求,创新是执行过程中的副产品;为了创新而...

    jqzoom放大镜插件.zip

    /* * JQZoom Evolution 1.0.1 - Javascript Image magnifier... if($.browser.safari || $.browser.opera) { $(img).css({position:'absolute',top:'0px',left:'0px'}); } /*if(a.css('position')!= 'absolute' &&...

    jquery ready函数源代码研究

    一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...

    jQuery实例教程

    (也许window.onload()能实现同样的功能,但是jQuery更加快速,灵活)。 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web...

    js 某个页面监听事件渲染完毕的时间.pdf

    常见的方法有使用window.onload和jQuery的(document).ready两种。其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体...

    jQuery快速高效制作网页交互特效

    在javaScript中的window事件又 window onload = fn(); 和onclick 在jQuery中常用的事件有文档就绪事件,对应的方法ready() $(document).ready(fn(){});  b:鼠标事件 常用的鼠标事件有:  click(fn); 单机鼠标...

    一个带验证的jQuery表单,同时支持无刷新编辑

     ,确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件,该方法主要就是设置各个验证项的正则表达式。  通用取值函数分三类进行取值  文本输入框,直接取值el.value  单多选,遍历所有...

    运用jQuery实现的Ajax无刷新删除和添加数据的表单

    ---DOM载入就绪可以查询及操纵时执行该操作|等同window.load,确保在body元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。  用到了一个JS脚本库,主要就是设置各个验证项的正则表达式,基本...

Global site tag (gtag.js) - Google Analytics