<!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 );
};