2

window,document,jQuery的load和ready分不清
新手搞不太懂,谢谢各位

7 个回答
8

3点区别

  • window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行,$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕
  • window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个,$(document).ready()可以同时编写多个,并且都可以得到执行
  • window.onload没有简化写法,$(document).ready(function(){})可以简写成$(function(){})
6

简而言之,window.onload需要加载完页面上的所有资源,比如图片,才会触发。
$(document).ready加载完DOM树就会触发,比上面那个快。

window.onload在jq里面的写法是$(window).load

$(document).ready可简写为$(...),可以用html5的DOMContentLoaded事件代替。在 html5 之前可用 document.onreadystatechange 事件并手动判断document.readyState == 'complete'来代替。

// jq
$(function() {
    //...
});

// html4
document.onreadystatechange = function() {
    if(document.readyState == 'complete') {
        //...
    }
};

//html5
document.addEventListener('DOMContentLoaded', function() {
    //...
});
2

Humphry · 2014年09月15日

添加评论
3

我认为主要区别有两个:

  1. window.onload的出发时机是当页面中的内容全部加载到浏览器时。而 jQuery 中的 $(document).ready() 的触发时机为问当中的 DOM 全部加载完时,也就是说,不会等待页面中的图片等资源加载完毕。在 jQuery 中也提供与 window.onload 类似的事件触发方法 $(window).load() ,该方法可以绑定到任意元素上。
  2. 当多次使用 window.onload 时,前面的方法会被后面的覆盖,因此只会执行最后一个。而 jQuery 中的 $(document).ready() 不管使用多少次,都会执行其对应的所有事件函数。
1

window.onload指 html css js 图片都加载完毕执行,jquery.ready方法是html css js加载完毕执行

1

简单来说Window.onlaod事件是在页面上所以资源加载完毕(图片、视频、脚本等)执行。document.onready是dom树渲染完成(资源未必加载)执行。

1

1. 执行的速度不同:

原生JavaScript的 window.onload 必须等到包括图片在内的等所有页面元素完全加载完毕后才会执行,比较慢;
然而,jQuery的$(document).ready()是在DOM树结构绘制完成后就立刻执行的,不必等到所有元素加载完毕,比较快;
PS:jQuery 也提供与 window.onload 类似的事件触发方法 $(window).load() ,该方法可以绑定到任意元素上;

2. 可以执行的个数(次数)不同

原生JavaScript的 window.onload 事件在页面只能有一个,若同时存在多个window.onload事件,只会执行最后一个(后面会覆盖前面的);
然而,jQuery 可以同时编写多个$(document).ready() 分别执行不同的事件函数,每个事件函数可以正常的被执行(不存在覆盖问题);

3. 书写的方式不同

window.onload 只有一种写法,没有简化写法;
$(document).ready(function(){})可以简写成$(function(){});
PS:可以用HTML5的DOMContentLoaded事件代替;

参考链接:
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload
http://www.w3schools.com/jsref/event_onload.asp
http://www.cnblogs.com/mengdd/p/4276801.html

撰写答案

推广链接