快捷導(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=""> 

您可能感興趣的文章:

相關(guān)文章

原生js實(shí)現(xiàn)商品篩選功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)商品篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
原生javascript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果
這篇文章主要介紹了原生javascript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果的相關(guān)資料,需要的朋友可以參考下
2016-02-02
微信小程序自定義組件與頁(yè)面的相互傳參
這篇文章主要為大家介紹了微信小程序自定義組件與頁(yè)面的相互傳參過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2022-04-04
js 奇葩技巧之隱藏代碼
這篇文章主要介紹了js 奇葩技巧之隱藏代碼,通過(guò)代碼示例展示了隱藏代碼的過(guò)程,需要的朋友可以參考下
2017-08-08
javascript實(shí)現(xiàn)隨機(jī)顯示星星特效
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)顯示星星特效的相關(guān)資料,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js實(shí)現(xiàn)隨機(jī)顯示星星特效的實(shí)現(xiàn)技巧，需要的朋友可以參考下
2016-01-01
詳解JS幾種變量交換方式以及性能分析對(duì)比
本篇文章主要介紹了JS幾種變量交換方式以及性能分析對(duì)比，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-11-11
Javascript實(shí)現(xiàn)元素選擇器功能
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)元素選擇器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
深入了解Hybrid App技術(shù)的相關(guān)知識(shí)
這篇文章主要介紹了深入了解Hybrid App技術(shù)的相關(guān)知識(shí)，Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具" Native App良好用戶交互體驗(yàn)的優(yōu)勢(shì) "和" Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì) ",需要的朋友可以參考下
2019-07-07
js調(diào)試系列源碼定位與調(diào)試[基礎(chǔ)篇]
如果看了1, 2兩篇，你對(duì)控制臺(tái)應(yīng)該有一個(gè)初步了解了，今天我們來(lái)個(gè)簡(jiǎn)單的調(diào)試。昨天留的三個(gè)課后練習(xí)，差不多就是今天要講的內(nèi)容
2014-06-06
如何利用JS實(shí)現(xiàn)時(shí)間軸動(dòng)畫效果
時(shí)間軸動(dòng)畫和幀式動(dòng)畫有很大不同,但相比之下時(shí)間軸方式來(lái)的更直觀和簡(jiǎn)便,下面這篇文章主要給大家介紹了關(guān)于如何利用JS實(shí)現(xiàn)時(shí)間軸動(dòng)畫效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06