window.onload和jquery.ready有什么区别么?

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

阅读 11.6k
评论 2014-09-14 提问
    7 个回答
    JoeRay61
    • 2.1k

    3点区别

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

      简而言之,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() {
          //...
      });
      评论 赞赏 2016-10-27
        范斌
        • 594

        我认为主要区别有两个:

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

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

          评论 赞赏 2014-09-14
            两仪
            • 9.5k

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

            评论 赞赏 2014-09-15

              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

              评论 赞赏 2016-07-15
                奶爸_萱
                • 3
                • 新人请关照
                评论 赞赏 2014-09-14
                  撰写回答

                  登录后参与交流、获取后续更新提醒