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 soon10 ????????if ( document.readyState === "complete" ||11 ????????????( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {12 13 ????????????// Handle it asynchronously to allow scripts the opportunity to delay ready14 ????????????window.setTimeout( jQuery.ready );15 16 ????????// Standards-based browsers support DOMContentLoaded17 ????????} else if ( document.addEventListener ) {18 19 ????????????// Use the handy event callback20 ????????????document.addEventListener( "DOMContentLoaded", completed );21 22 ????????????// A fallback to window.onload, that will always work23 ????????????window.addEventListener( "load", completed );24 25 ????????// If IE event model is used26 ????????} else {27 28 ????????????// Ensure firing before onload, maybe late but safe also for iframes29 ????????????document.attachEvent( "onreadystatechange", completed );30 31 ????????????// A fallback to window.onload, that will always work32 ????????????window.attachEvent( "onload", completed );33 34 ????????????// If IE and not a frame35 ????????????// continually check to see if the document is ready36 ????????????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 Perini49 ????????????????????????????// 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 events56 ????????????????????????detach();57 58 ????????????????????????// and execute any waiting functions59 ????????????????????????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 onreadystatechange:http://mutongwu.iteye.com/blog/2207626
jQuery 的 ready 函数是如何工作的?:http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html
jquery.ready可以在文档加载后尽快执行对文档的操作
原文地址:http://www.cnblogs.com/xiaozhuyuan/p/7498939.html