DOMContentLoaded

素颜马尾好姑娘i 2022-06-16 23:26 106阅读 0赞

<!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

IEContentLoaded(window, finishedLoad) ;

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