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


Posted in Javascript onDecember 28, 2009

1.执行时间 

        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
        $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

2.编写个数不同 

         window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
         $(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法 

        window.onload没有简化写法
         $(document).ready(function(){})可以简写成$(function(){});

$(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>

呵呵,有时候我们也有这个需求!

jquery $(document).ready() 与window.onload的区别 以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 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绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。

以上就是本文的全部内容,了解更多jQuery的语法,大家可以查看:《jQuery 1.10.3 在线手册》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
javascript 常用功能总结
Mar 18 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
Javascript之String对象详解
Jun 08 Javascript
js实现登录与注册界面
Nov 01 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
jQuery的强大选择器小结
Dec 27 #Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 #Javascript
JavaScript 拾漏补遗
Dec 27 #Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 #Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 #Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 #Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 #Javascript
You might like
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Javascript 入门基础学习
2010/03/10 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python unichr函数知识点总结
2020/12/16 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
数学专业推荐信范文
2013/11/21 职场文书
技能竞赛活动方案
2014/02/21 职场文书
学校端午节活动方案
2014/08/23 职场文书
委托书的写法
2014/09/16 职场文书
高考升学宴答谢词
2015/01/20 职场文书
投资意向协议书
2015/01/29 职场文书
死者家属慰问信
2015/03/24 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android