<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
font-family: 微軟正黑體;
}
span{
color: darkRed;
}
em{
color:steelBlue;
font-style: normal;
}
</style>
</head>
<body>
<h3>
解析html結構<br>
加載外部css/js <br>
解析並執行js<br>
DOM樹建構完成<em>DOMContentLoaded</em>：<span id="DOMContentLoaded"></span><br>
加載圖片等外部文件<br>
頁面加載完畢<em>load</em>：<span id="load"></span><br>
</h3>
<p>從數字可以看出哪一個事件先載入</p>
<script type="text/javascript">
var i = 0;
function DOMContentLoaded(){
i++;
document.getElementById('DOMContentLoaded').innerHTML=i;
}
function load(){
i++;
document.getElementById('load').innerHTML=i;
}
window.addEventListener('DOMContentLoaded',DOMContentLoaded,false);
window.addEventListener('load',load,false);
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
