DOMContentLoaded-优快云博客

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>DOMContentLoaded</title>
    <meta name="t_omni_demopage" content="1"><meta http-equiv="X-UA-Compatible" content="IE=edge">
	<style type="text/css">
		div.timing-result{width:33%; float:left}
	</style>
</head>
<body>    
    <h1 id="DemoTitle">
        DOMContentLoaded
    </h1>
    <div id="DemoIntroduction">
        The DOMContentLoaded event fires when parsing of the current page is complete; the
        load event fires when all files have finished loading from all resources, including
        ads and images. DOMContentLoaded is a great event to use to hookup UI functionality
        to complex web pages.
    </div>
    <div id="DemoContent">
        <h3>
            When each event fires, the word "DONE!" is printed to the screen. To try the test
            again, press Ctrl+F5 (to refresh this page without using cached images).</h3>
        <div id="timing">
            <div class="timing-result">
                <strong>"DOMContentLoaded"</strong>
                <div id="DCL"><span class="done">doing!</span></div>
            </div>
            <div class="timing-result">
                Difference:
                <div id="delta">23725ms</div>
            </div>
            <div class="timing-result">
                <strong>"load"</strong>
                <div id="load"><span class="done">doing!</span></div>
            </div>
        </div>
    </div>

    <script>
var timeDCL;

function addListener(obj, eventName, listener) {
	if(obj.addEventListener) {
		obj.addEventListener(eventName, listener, false);
	} else {
		obj.attachEvent("on" + eventName, listener);
	}
}

function finishedDCL() {
	timeDCL = new Date();
	document.getElementById('DCL').innerHTML = "<span class='done'>DONE!</span>";
}

function finishedLoad() {
	if(timeDCL) {
		var delta = new Date() - timeDCL;
		document.getElementById('delta').innerHTML = delta + "ms";
	}
	document.getElementById('load').innerHTML = "<span class='done'>DONE!</span>";
}


addListener(document, "DOMContentLoaded", finishedDCL);
addListener(window, "load", finishedLoad);


if(!window.addEventListener) {
	if(document.readyState){
		document.attachEvent("onreadystatechange", function(){
			if(document.readyState == "complete"){
				document.getElementById('DCL').innerHTML = "( readyState )" + document.readyState;
			}
		})
		
	}
}
	console.log("document.readyState", document.readyState);
</script>

    <hr>
    <div id="images">
        <img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg" width=100>
        <img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/window.jpg"width=100>
        <img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey2.jpg"width=100>
        <p>
            The > 2MB images above should delay the load event, but not the DOMContentLoaded
            event</p>
    </div>

</body>
</html>

http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html

function IEContentLoaded (w, fn) {
	var d = w.document, done = false,
	// only fire once
	init = function () {
		alert(i)
		if (!done) {
			done = true;
			fn();
		}
	};
	// polling for no errors
	(function () {
		try {
			// throws errors until after ondocumentready
			d.documentElement.doScroll('left');
		} catch (e) {
			setTimeout(arguments.callee, 50);   //属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性
			return;
		}
		// no errors, fire
		init();
	})();
	// trying to always fire before onload
	d.onreadystatechange = function() {
		if (d.readyState == 'complete') {
			d.onreadystatechange = null;
			init();
		}
	};
}

IEContentLoaded(window, finishedLoad) ;

http://javascript.nwbox.com/IEContentLoaded/    转自jquery源码，实现jquery.ready  代码实现