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 面向对象 重载
May 13 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
PyCharm代码格式调整方法
2018/05/23 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python定义函数实现累计求和操作
2020/05/03 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
2014年教师节寄语
2014/04/03 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
考研复习计划
2015/01/19 职场文书
挂职个人工作总结
2015/03/05 职场文书
放假通知格式
2015/04/14 职场文书
小学毕业感言100字
2015/07/30 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书