|
|
上圖展示了傳統(tǒng) Wordpress 模板在瀏覽器中的載入順序，Loading 條的出現(xiàn)和消失分布于頭尾。
如果我們?cè)陧?yè)面的不同位置放置多個(gè) JS ，每個(gè) JS 用于逐步增加 Loading 條的寬度，那么這個(gè) Loading 條無(wú)疑會(huì)更具實(shí)用價(jià)值。它在一定程度上緩解了訪客等待載入的枯燥感，同時(shí)還能客觀反映頁(yè)面載入的進(jìn)度。若再配以 jQuery 內(nèi)建的動(dòng)畫(huà)效果，其完全可以與瀏覽器自帶的狀態(tài)條媲美。
先來(lái)看一個(gè)演示：地址。
要得到演示上的進(jìn)度條效果，首先，引入 jQuery 框架(一定要放在頁(yè)頭 <head> 標(biāo)簽內(nèi))。然后在 <body> 標(biāo)簽起始位置放置：
復(fù)制代碼 代碼如下:
<div id="loading"><div></div></div>
CSS 可以這么寫(xiě)：
復(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)備工作到這里就做好了。
接著，請(qǐng)隨意發(fā)揮，依照你對(duì)圖二的理解，在模板各個(gè)部分的適當(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)度條。
JavaScript技術(shù)：jQuery 頁(yè)面載入進(jìn)度條實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
