jquery.ready可以在文档加载后尽快执行对文档的操作

Posted 青 • 原木

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery.ready可以在文档加载后尽快执行对文档的操作相关的知识,希望对你有一定的参考价值。

jquery 1.12.4中ready的关键代码 

 1 jQuery.ready.promise = function( obj ) {
 2     if ( !readyList ) {
 3 
 4         readyList = jQuery.Deferred();
 5 
 6         // Catch cases where $(document).ready() is called
 7         // after the browser event has already occurred.
 8         // Support: IE6-10
 9         // Older IE sometimes signals "interactive" too soon
10         if ( document.readyState === "complete" ||
11             ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
12 
13             // Handle it asynchronously to allow scripts the opportunity to delay ready
14             window.setTimeout( jQuery.ready );
15 
16         // Standards-based browsers support DOMContentLoaded
17         } else if ( document.addEventListener ) {
18 
19             // Use the handy event callback
20             document.addEventListener( "DOMContentLoaded", completed );
21 
22             // A fallback to window.onload, that will always work
23             window.addEventListener( "load", completed );
24 
25         // If IE event model is used
26         } else {
27 
28             // Ensure firing before onload, maybe late but safe also for iframes
29             document.attachEvent( "onreadystatechange", completed );
30 
31             // A fallback to window.onload, that will always work
32             window.attachEvent( "onload", completed );
33 
34             // If IE and not a frame
35             // continually check to see if the document is ready
36             var top = false;
37 
38             try {
39                 top = window.frameElement == null && document.documentElement;
40             } catch ( e ) {}
41 
42             if ( top && top.doScroll ) {
43                 ( function doScrollCheck() {
44                     if ( !jQuery.isReady ) {
45 
46                         try {
47 
48                             // Use the trick by Diego Perini
49                             // http://javascript.nwbox.com/IEContentLoaded/
50                             top.doScroll( "left" );
51                         } catch ( e ) {
52                             return window.setTimeout( doScrollCheck, 50 );
53                         }
54 
55                         // detach all dom ready events
56                         detach();
57 
58                         // and execute any waiting functions
59                         jQuery.ready();
60                     }
61                 } )();
62             }
63         }
64     }
65     return readyList.promise( obj );
66 };

 

从代码中看到判断页面加载完成且可以操作有下面这几个点:

1.document.readyState

  readyState是一个document的属性,描述document文档加载状态。

  属性值: 

  loading:表示文档正在载入。

  Interactive:文档已经完成加载,且文档已经解析完成,但是像图片,样式表和框架等子资源仍在加载。

  complete:文档和所有的子资源都完成加载。这个状态表示load事件将被触发。

  readystate兼容性问题:

  [1]只支持‘complete’. Opera Presto(欧朋浏览器的Presto引擎)是在load事件之后触发‘complete’(按照在html5标准规范这个顺序是错误的)。

  [2] IE9和IE10 有bug,\'interactive\' 状态可以在文档完成解析之前触发。

  [3] IE4这个属性仅适用于document、embed、img、link、object、script和style对象。

 参考:https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

           https://msdn.microsoft.com/zh-cn/library/ms534359(v=vs.85).aspx

https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness

2.DOMContentLoaded

 当初始HTML文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载。

  兼容性:IE8及更早版本没有。在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕。在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态,因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。(所以检测时要catch)

 参考: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Browser_compatibility

 3.doScroll

 doScroll在主文档加载完成后才可调用,它的初始化在onload之前。

doScroll从IE11开始不再支持。可以使用scrollLeft或scrollTop。模拟点击一个滚动条组件。scrollbarDown,点击滚动条的向下箭头。scrollbarPageRight,向右移动一屏内容(如果内容超出一屏的话,否则没有效果)。 

 参考:https://msdn.microsoft.com/en-us/library/ms536414(v=vs.85).aspx

   http://javascript.nwbox.com/IEContentLoaded/ 

4.onload

  在文档装载完成后会触发domcument的 load 事件。此时,在文档中的所有对象都在DOM中,所有图片,脚本,链接以及子框都完成了加载。

  参考:https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload

     https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument/load

 

其他参考:

http://w3c.github.io/html/syntax.html#the-end

http://www.cnblogs.com/-simon/p/5889722.html

DOMContentLoaded VS onload VS onreadystatechangehttp://mutongwu.iteye.com/blog/2207626

jQuery 的 ready 函数是如何工作的?http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html

  

 

以上是关于jquery.ready可以在文档加载后尽快执行对文档的操作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery ready方法实现

在 jQuery 的 .ready() 之前执行的非 jQuery .ready() 替代方案,与 DOMContentLoaded 不同

jQuery初始化加载的实现

JQuery面试题总结

JQuery源码解析-Dom加载过程

ready是先执行的,load后执行,DOM文档的加载步骤