真实加载页面信息时显示的loading特效，兼容Firefox
大家看到很多页面的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>
<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>
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>
document.onreadystatechange = subSomething;//页面的onreadystatechange事件
function subSomething()
{
if(document.readyState == "complete") //如果准备状态为 complete
document.getElementById("divLoading").style.display = "none"; //loading效果消失
}
</script>
