javascript - window.onload和jquery.ready有什么区别么?
伊谢尔伦
伊谢尔伦 2017-04-10 14:35:58
[JavaScript讨论组]

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(7)
怪我咯

3点区别

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

简而言之,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() {
    //...
});
阿神

我认为主要区别有两个:

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

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

伊谢尔伦

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

天蓬老师

http://www.jb51.net/article/21628.htm

伊谢尔伦

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号