快捷導(dǎo)航

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

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

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

現(xiàn)在網(wǎng)上有很多網(wǎng)頁加載進(jìn)度條，但大多都是時間固定的。
下面的當(dāng)查詢大量數(shù)據(jù)時，網(wǎng)頁加載較慢，在網(wǎng)頁加載時，顯示進(jìn)度條，當(dāng)網(wǎng)頁加載完成時，進(jìn)度條消失，顯示網(wǎng)頁已經(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)度條，也可以放一張動態(tài)圖片</div> 
<div id="content" style="display:none">網(wǎng)頁真正顯示的內(nèi)容</div> 
</body> 
</html> 

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