欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 頁面載入進(jìn)度條實現(xiàn)代碼

 更新時間：2009年02月08日 15:43:09   作者：  
頁面 Loading 條基本人人都會用。它的原理很簡單：在頁頭放置一個文字或者圖片的 loading 狀態(tài)，然后頁尾載入一段 JS 隱藏掉，即根據(jù)瀏覽器的載入順序來實現(xiàn)的簡易 Loading 狀態(tài)條。

loading Process traditional

上圖展示了傳統(tǒng) Wordpress 模板在瀏覽器中的載入順序，Loading 條的出現(xiàn)和消失分布于頭尾。

new loading bar


如果我們在頁面的不同位置放置多個 JS ，每個 JS 用于逐步增加 Loading 條的寬度，那么這個 Loading 條無疑會更具實用價值。它在一定程度上緩解了訪客等待載入的枯燥感，同時還能客觀反映頁面載入的進(jìn)度。若再配以 jQuery 內(nèi)建的動畫效果，其完全可以與瀏覽器自帶的狀態(tài)條媲美。
先來看一個演示：地址。
要得到演示上的進(jìn)度條效果，首先，引入 jQuery 框架(一定要放在頁頭 <head> 標(biāo)簽內(nèi))。然后在 <body> 標(biāo)簽起始位置放置：
復(fù)制代碼 代碼如下:

<div id="loading"><div></div></div>

CSS 可以這么寫：
復(fù)制代碼 代碼如下:

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

準(zhǔn)備工作到這里就做好了。
接著，請隨意發(fā)揮，依照你對圖二的理解，在模板各個部分的適當(dāng)位置放置：
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>

其中紅色數(shù)值應(yīng)該隨載入順序逐步增加，直到 footer.php。另外別忘了在 footer.php 最末尾放上：
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$("#loading").fadeOut()
</script>

用于載入完畢后隱藏進(jìn)度條。

相關(guān)文章

最新評論