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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
js+css3制作时钟特效
Oct 16 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 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
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
用ADODB.Stream转换
2007/01/22 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 使用with上下文实现计时功能
2018/03/09 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python表达式的优先级详解
2020/02/18 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
七一建党节演讲稿
2014/09/11 职场文书
人事代理委托书
2014/09/27 职场文书
田径运动会广播稿
2015/08/19 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL