JS DOMReady事件的六种实现方法总结(3)

function initDocReady(){ var COMPLETE = "complete"; docReadyEvent = new Ext.util.Event(); if (Ext.isGecko || Ext.isOpera) { DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false); } else if (Ext.isIE){ DOC.write("<s"+'cript defer="defer" src="/'+'/:"></s"+'cript>"); DOC.getElementById(IEDEFERED).onreadystatechange = function(){ if(this.readyState == COMPLETE){ fireDocReady(); } }; } else if (Ext.isWebKit){ docReadyProcId = setInterval(function(){ if(DOC.readyState == COMPLETE) { fireDocReady(); } }, 10); } // no matter what, make sure it fires on load E.on(WINDOW, "load", fireDocReady); };

实现思路与Dojo的一致，不再赘诉。

总结

总结各大主流框架的做法，写了以下这个版本。主要是尽量的做到优化并考虑到FF2下的Bug，提供一个是否使用DOMContentLoaded的开关配置。

function onDOMContentLoaded(onready,config){ //浏览器检测相关对象，在此为节省代码未实现，实际使用时需要实现。 //var Browser = {}; //设置是否在FF下使用DOMContentLoaded（在FF2下的特定场景有Bug） this.conf = {enableMozDOMReady:true}; if( config ) for( var p in config) this.conf[p] = config[p]; var isReady = false; function doReady(){ if( isReady ) return; //确保onready只执行一次 isReady = true; onready(); } if( Browser.ie ){ (function(){ if ( isReady ) return; try { document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } doReady(); })(); window.attachEvent('onload',doReady); } else if (Browser.webkit && Browser.version < 525){ (function(){ if( isReady ) return; if (/loaded|complete/.test(document.readyState)) doReady(); else setTimeout( arguments.callee, 0 ); })(); window.addEventListener('load',doReady,false); } else{ if( !Browser.ff || Browser.version != 2 || this.conf.enableMozDOMReady) document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); doReady(); }, false ); window.addEventListener('load',doReady,false); } }

以上这篇JS DOMReady事件的六种实现方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: