domReady方法

最新推荐文章于 2024-07-13 16:47:53 发布

原创最新推荐文章于 2024-07-13 16:47:53 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

28 篇文章

订阅专栏

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>赤壁之战</title>
        <meta http-equiv="X-UA-Compatible" content="edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="Keywords" content="赤壁之战">
        <meta name="description" content="赤壁之战">
        <script src="test.js" id="test"></script>
    </head>
<script>
    var domReady = function(fn){

    	if(document.addEventListener){
    		document.addEventListener("DOMContentLoaded",fn,false);
    	}else{
    		IEContentLoaded(fn);
    	}
    	//IE 模拟DOMCONTENTLOADED
    	function IEContentLoaded(fn){
    		var d  = window.document;
    		var done = false;
    		var init = function(){
    			if(!done){
    				done = true;
    				fn();
    			}
    		};
    		(function(){
    			try{
    				//DOM 未创建之前调用DOSCROLL会抛出错误
    				//原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定iframe的内容是否加载完毕原理是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在本例中每间隔 50 毫秒尝试去执行 doScroll，注意，由于页面没有加载完成的时候，调用 doScroll 会导致异常，所以使用了 try -catch 来捕获异常。
    				//
    				d.documentElement.doScroll('left');
    			}catch(e){
    				//
    				return setTimeout(arguments.callee,50);
    				
    			}
    			// 没有错误解时，就执行
    			init();
    		})();
    		//onreadystatechange这个事件不太可靠，比如当页面中存在图片的时候，可能反而在 onload 事件之后才能触发，换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
    		d.onreadystatechange = function(){
	    		if(d.readyState == 'complete'){
	    			d.onreadystatechange = null;
	    			init();
	    		}
	    	}
    	}
    }
    var t1 = 0;
    domReady(function(){
    	var t1 = new Date().getTime();
    	console.log(t1)
    	var oTitle = document.getElementById('title');
    	oTitle.style.color='red';
    })
    window.onload = function(){
    	var t2 = new Date().getTime();
    	console.log(t2-t1)
    }
</script> 
<body>  
<h1 id="title">12121</h1>
</body>
</html>

JQ 源码

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready, 1 );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};