`
linhui_dragon
  • 浏览: 155930 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

$(document).ready() 与 JavaScript中的window.onload

    博客分类:
  • JS
 
阅读更多
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 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

window.load        $(document).ready()
执行时机  必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行  网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完
编写个数  不能同时编写多个
以下代码无法正确执行:
window.onload = function(){
   alert(“text1”);
};
window.onload = function(){
   alert(“text2”);
};

结果只输出第二个  能同时编写多个
以下代码正确执行:
$(document).ready(function(){
   alert(“Hello World”);
});
$(document).ready(function(){
   alert(“Hello again”);
});
结果两次都输出 
简化写法  无  $(function(){
   // do something
}); 


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


——————————————————————————————

最近在改一个嵌入在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绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。


引子http://www.jb51.net/article/21628.htm
  • 大小: 126.3 KB
分享到:
评论

相关推荐

    jQuery(document).ready(function($) { });的几种表示方法

    **第五种:jQuery的`$(document).ready()`与`window.onload()`的区别** - `$(document).ready()`在DOM元素加载完毕后立即执行,不需要等待所有资源(如图片、CSS等)加载完成。 - 相比之下,`window.onload()`需要...

    $(document).ready(function() {})不执行初始化脚本

    3. 如果可能,尝试将`$(document).ready()`中的代码移至`window.onload`事件中,看看是否能正常执行,以确定问题是否与DOM加载有关。 4. 如果有多个库在使用`$`,考虑使用`jQuery.noConflict()`来避免冲突。 通过...

    浅析document.ready和[removed]的区别讲解

    本文将深入探讨`document.ready`和`window.onload`这两个事件的区别。 `document.ready`是jQuery库提供的一种方法,它的全称是`$(document).ready()`,它的主要作用是在DOM结构构建完成,但图像或其他资源可能尚未...

    jquery的$(document).ready()和onload的加载顺序

    在JavaScript和jQuery的世界里,了解`$(document).ready()`和`window.onload`的加载顺序是非常重要的,尤其是在处理页面加载和交互效果时。这两个事件都与页面加载有关,但它们触发的时机有所不同,这也可能导致在...

    全面解析jQuery $(document).ready()和JavaScript onload事件

    这两个阶段分别对应了jQuery中的$(document).ready()方法和JavaScript的onload事件。 $(document).ready()是jQuery提供的一个方法,它允许我们在DOM结构完全加载并且解析后立即执行代码。在描述中提到,$(document)...

    jQuery之$(document).ready()使用介绍

    通过将JavaScript代码放在`$(document).ready()`中,可以减少页面加载时间,并立即显示页面内容。 #### 6. 与window.onload的区别 $(document).ready()不同于window.onload。window.onload是在整个页面(包括所有的...

    my97 datepicker的'$db.cal'为空或不是对象问题解决参考

    2. **加载顺序问题**:my97 datepicker需要在DOM加载完成后才能初始化,因此它的脚本应该放在`<body>`标签的底部,或者使用`window.onload`或`$(document).ready`来确保在调用插件之前页面元素已经完全加载。...

    JavaScript类库_JQuery1.8离线Api手册全中文版.zip

    开发者应尽量使用`$(document).ready()`而不是`window.onload`来尽早执行代码,以提高页面加载速度。 **总结** jQuery 1.8 API中文离线手册是开发者不可或缺的参考资料,它详细阐述了jQuery的各种功能和用法。通过...

    JQ中$(window).load和$(document).ready区别与执行顺序

    在JavaScript和jQuery中,`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数,它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...

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

    在JavaScript和jQuery中,`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数,但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...

    [removed]与$(document).ready()的区别分析

    在JavaScript和jQuery的世界里,`window.onload` 和 `$(document).ready()` 都是用来确保页面内容加载后执行特定脚本的事件,但它们之间存在一些关键的区别。理解这些差异对于编写高效、响应式的网页至关重要。 ...

    jquery $(document).ready()和[removed]的区别浅析

    而window.onload是原生JavaScript中用于检测页面上所有资源加载完成的事件。两者的用法在很多情况下非常相似,但它们之间也存在一些关键的区别,以下就是$(document).ready()和window.onload的区别浅析。 1. 执行...

    $(document)

    `$(document).ready(function(){ })` 与 `window.onload` 都可以用来等待页面加载完成后再执行特定的脚本,但它们之间存在明显的区别: - **`$(document).ready(function(){ })`**:仅在DOM加载完成后立即执行,...

    jquery中的$(document).ready()使用小结

    首先,我们来解释一下传统JavaScript中的window.onload方法。window.onload是一个事件监听器,它会在整个页面完全加载完成后触发,包括所有的HTML元素、图片、脚本文件等。因此,如果页面内容较多或者图片文件较大,...

    jquery $(document).ready() 与[removed]的区别

    传统的JavaScript通过window.onload方法来实现此功能,而在jQuery中,则主要使用$(document).ready()方法。虽然这两个方法在功能上相似,都是确保在页面的HTML元素完全加载完毕后执行特定的JavaScript代码,但它们...

    jQuery mobile在页面加载时添加加载中效果 document.ready 和[removed]执行顺序比较

    本文主要讲述了在jQuery Mobile环境下,如何在页面加载过程中添加加载中效果,并比较了页面加载事件`document.ready`和`window.onload`的执行顺序。同时提供了一些示例代码来展示如何实现这一效果。 首先,了解...

    实现在HTML页面加载完毕后运行js方法.docx

    `window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的,而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的,虽然这也意味着页面中的所有元素都可以被 JavaScript 代码所操作,但是,并不意味着...

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

    本文主要讨论的是jQuery中的`$.ready()`方法及其与`onload`事件、`$(window).load()`方法的区别与应用。 首先,`$.ready()`方法,通常写作`$(document).ready()`,它的主要作用是在DOM(文档对象模型)完全加载完毕...

Global site tag (gtag.js) - Google Analytics