详解 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(){}),

因为他会在页面的dome元素加载完毕后就执行,而无需等到图片或其他媒体下载完毕.

但是有时候确实需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以

是该使用 $(window).load(function(){...}) 

还是该使用 $(function(){}) 往往需要结合具体需要而作不同的选择。

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

<script type="text/javascript">

(function() {

    alert("DOM还没加载哦!");
    
})(jQuery)

</script>

有时候我们也有这个需求!以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

window.load  $(document).ready() 

执行时机  必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行  网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完 

编写个数  不能同时编写多个

不能同时编写多个 onload 以下代码无法正确执行: 

window.onload = function(){ 
  alert(“text1”); 
};
 
window.onload = function(){ 
  alert(“text2”); 
}; 
//结果只输出第二个 ,没有简化写法

 

能同时编写多个 ready 以下代码正常执行: 

$(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 (){
    // 编写代码
};

好啦!啰嗦不少,看过了这些就再不会对 ready 和 onload 有疑问了吧!

原文链接:HelloWeb前端网 » 详解 jquery $(document).ready() 与 window.onload 的区别 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享