快捷導(dǎo)航

網(wǎng)頁(yè)加載時(shí)頁(yè)面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁(yè)內(nèi)容

更新時(shí)間：2012年12月23日 16:59:15 作者：

網(wǎng)頁(yè)加載時(shí)頁(yè)面顯示進(jìn)度條（加載完成時(shí)顯示網(wǎng)頁(yè)內(nèi)容）,這種效果在瀏覽網(wǎng)頁(yè)很常見(jiàn)，本文也介紹一種實(shí)現(xiàn)方法，需要了解的朋友可以參考下

現(xiàn)在網(wǎng)上有很多網(wǎng)頁(yè)加載進(jìn)度條，但大多都是時(shí)間固定的。
下面的當(dāng)查詢大量數(shù)據(jù)時(shí)，網(wǎng)頁(yè)加載較慢，在網(wǎng)頁(yè)加載時(shí)，顯示進(jìn)度條，當(dāng)網(wǎng)頁(yè)加載完成時(shí)，進(jìn)度條消失，顯示網(wǎng)頁(yè)已經(jīng)加載完成的內(nèi)容。

復(fù)制代碼代碼如下:

 
<html> 
<script language=VBScript> 
Dim Bar, SP 
Bar = 0 
SP = 100 
Function Window_onLoad() 
Bar = 95 
SP = 10 
End Function 
Function Count() 
if Bar < 100 Then 
Bar = Bar + 1 
setTimeout "Count()", SP 
else 
document.getElementById("jdt").style.display="none" 
document.getElementById("content").style.display="" 
end if 
End Function 
Call Count() 
</script> 
<body> 
<div id="jdt" >此處顯示進(jìn)度條，也可以放一張動(dòng)態(tài)圖片</div> 
<div id="content" style="display:none">網(wǎng)頁(yè)真正顯示的內(nèi)容</div> 
</body> 
</html> 

----------------------------------------------------
最簡(jiǎn)單的就是放圖片，網(wǎng)頁(yè)加載完成隱藏圖片，顯示網(wǎng)頁(yè)內(nèi)容

復(fù)制代碼代碼如下:

 
<body onLoad="loadDiv.style.display='none';" style="margin:0px;"> 
<style type="text/css"> 
#loadDiv { 
position:absolute; 
z-index:999; 
width:expression(document.body.clientWidth); 
height:expression(document.body.clientHeight); 
background-color:#FFFFFF; 
text-align:center; 
padding-top:200px; 
} 
</style> 
<div id="loadDiv"><img src="http://www.51ajax.com/images/rss/loading.gif">&nbsp;Loading...</div> 
<iframe src="http://505551735.qzone.qq.com/" > 
</iframe> 
</body> 

-------------------------------------------------------

復(fù)制代碼代碼如下:

 
<html> 
<script language=JavaScript> 
function Loaded() 
{ 
document.getElementById("loadDiv").style.display="none" 
document.getElementById("content").style.display="" 
} 
</script> 
<body onLoad="Loaded()"> 
<div id="loadDiv" style="display:block"><img src="http://www.51ajax.com/images/rss/loading.gif">&nbsp;Loading...</div> 
<iframe id="content" style="display:none" src=""> 

您可能感興趣的文章: