大家看到很多頁面的Loading很好看，當有些是假的，設定了一些時間後，再進入想要跳轉的頁面。現在我有一個真實頁面載入前的Loading。。。
一。架構中
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>架構中的LOADING</title>
</head>
<body>
<div align="center" style="position: absolute;
width: 96px; height: 96px; z-index: 1; left:160px; top:18px" id="load">
<img src="http://www.codefans.net/jscss/demoimg/loading.gif" /> loading...
</div>
<iframe style="visibility:hidden" onreadystatechange=stateChangeIE(this)
onload=stateChangeFirefox(this) name="callframe" id="callframe"
width="1002" height="768" frameborder="0" marginheight="0">
</iframe>
<script>
function stateChangeIE(_frame) //IE下
{
if (_frame.readyState=="interactive")//state: loading, interactive, complete
{
var loader = document.getElementById("load");
loader.innerHTML = "";
loader.style.display = "none";
_frame.style.visibility = "visible";
}
}
function stateChangeFirefox(_frame) //FF下
{
var loader = document.getElementById("load");
loader.innerHTML = "";
loader.style.display = "none";
_frame.style.visibility = "visible";
}
callframe.location.href="http://www.cnblogs.com/sukiwqy";
</script>
</body>
</html>
二。頁面中
這是那個 loading 層
<div id="divLoading" align="center" style="position: absolute;
width: 96px; height: 96px; z-index: 1; left:450px; top:360px">
<table>
<tr>
<td><img src="../images/processing.gif" /></td><td> loading...</td>
</tr>
</table>
</div>
頁面的 onreadystatechange 事件
<script language="javascript" type="text/javascript">
document.onreadystatechange = subSomething;//頁面的onreadystatechange事件
function subSomething()
{
if(document.readyState == "complete") //如果準備狀態為 complete
document.getElementById("divLoading").style.display = "none"; //loading效果消失
}
</script>
