1.执行时间




              一般来说$(document).ready先onload执行。




ready是文档结构已解释完成后执行,ready是jQuery自定义事件。

onload是文档已加载完成后执行,onload是window对象属性。

一个页面的响应加载顺序如下:




a.域名解析--》b.解释html标签--》c.加载JS和CSS--》d.加载图片等其它信息

                $(document).ready在c和d之间执行,onload是在d完成之后执行

最容易来说明二者区别的是img标签,




onload是src肯定加载完成。在用onload设置图片大小时,图片是先完全撑开,然后是重设大小。屏幕会有闪一下,网络快看不出,

慢的话,很明显。图片加载多久,页面就撑开多久,用户体验及差。

ready是浏览器解释完成img标签,src可能未加载完成。ready就不会有此问题。因为ready是在图片还没加载完成就已经设定其大小。

$(document).ready分析:




ready是jQuery的自定义事件。执行ready表示文档结构已解释完成 。

jquery判断文档结构已解释完成关键的方法是:jQuery.bindReady和jQuery.ready,实现原理如下:  

1.判断document.readyState的状态,如果状态为complete,表示文档结构已解释完成,执行jQuery.ready方法。

document.readyState几种状态 :

 这个属性是只读的,传回值有以下的可能: 
0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。 
1-LOADING:加载程序进行中,但文件尚未开始解析。 
2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。 
3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
4-COMPLETED:文件已完全加载,代表加载成功。     

jQuery.ready方法先判断body是否存在,存在设置isReady状态为true,然后执行ready自定义事件,不存在则递归调用自己。

2.如果document没有readyState属性或状态不对。根据不同浏览器,分析执行如下:

对标准浏览器绑定:document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false )

对于FF, Chrome, Safari, IE9等浏览器:

DOMContentLoaded 事件在许多Webkit浏览器以及IE9上都可以使用, 

此事件会在DOM文档准备好以后触发, 包含在HTML5标准中. 对于支持此事件的浏览器,直接使用DOMContentLoaded事件是最简单最好的选择.

 

对IE(9之前)浏览器绑定:document.attachEvent( "onreadystatechange", DOMContentLoaded )

IE有 onreadystatechange   当页面加载状态发生改变时执行此方法. 要用此方法,要判断 readyState

               

                DOMContentLoaded中调用jQuery.ready方法,同1中一样。

 

 

2.数量问题

一次加载  ready可以执行多次

jQuery(document).ready(function() {
        console.log('Ready1');
  });
  jQuery(document).ready(function() {
        console.log('Ready2');
     });
       输出:
       Ready1
       Ready2

一次加载 onload只能够执行一次,后页的会把前面的覆盖,如下:

window.onload = function() {
                console.log('Onload1');
            }
            window.onload = function() {
                console.log('Onload2');
            }
   输出:
                                      Onload2

 


转载于:https://blog.51cto.com/tulang/1076339