Jquery 頁面載入 進度條

jQuery 頁面載入進度條

頁面 Loading 條基本人人都會用。它的原理很簡單：在頁頭放置一個文字或者圖片的 loading 狀態，然後頁尾載入一段 JS
隱藏掉，即根據瀏覽器的載入順序來實現的簡易 Loading 狀態條。

展示了傳統 WordPress 模板在瀏覽器中的載入順序，Loading 條的出現和消失分佈於頭尾。

如果我們在頁面的不同位置放置多個 JS ，每個 JS 用於逐步增加 Loading 條的寬度，那麼這個 Loading
條無疑會更具實用價值。它在一定程度上緩解了訪客等待載入的枯燥感，同時還能客觀反映頁面載入的進度。若再配以 jQuery
內建的動畫效果，其完全可以與瀏覽器內建的狀態條媲美。

先來看一個示範：地址。

要得到示範上的進度條效果，首先，引入 jQuery
架構(一定要放在頁頭 <head> 標籤內)。然後在 <body> 標籤起始位置放置：

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

CSS 可以這麼寫：

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

準備工作到這裡就做好了。

接著，請隨意發揮，依照你對圖二的理解，在模板各個部分的適當位置放置：

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

其中紅色數值應該隨載入順序逐步增加，直到 footer.php。另外別忘了在 footer.php 最末尾放上：

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

用於載入完畢後隱藏進度條。

源碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loading Status Bar</title>
<meta name="robots" content="noindex,follow" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
document.writeln("<style type=\"text\/css\">#loading{width:100px;height:20px;background:#A0DB0E;padding:5px;position:fixed;left:0;top:0}#loading div{width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial}<\/style>")
</script>

</head>
<body>
<noscript>您的瀏覽器不支援 Javascript</noscript>
<div id="loading"><div></div></div>
<script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"34px"}).text("34%")},500)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"67px"}).text("67%")},1000)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"82px"}).text("82%")},1500)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"100px"}).text("100%")},2000)</script>
<script type="text/javascript">setTimeout(function(){$("#loading").hide(500)},3000)</script>
</body>
</html>