shawn published@17:40 / 2009-01-07 /
trackback
/ skip
頁面 loading 條基本人人都會用。它的原理很簡單：在頁頭放置乙個文字或者的 loading 狀態，然後頁尾載入一段 js 隱藏掉，即根據瀏覽器的載入順序來實現的簡易 loading 狀態條。
上圖展示了傳統 wordpress 模板在瀏覽器中的載入順序，loading 條的出現和消失分布於頭尾。
如果我們在頁面的不同位置放置多個 js ，每個 js 用於逐步增加 loading 條的寬度，那麼這個 loading 條無疑會更具實用價值。它在一定程度上緩解了訪客等待載入的枯燥感，同時還能客觀反映頁面載入的進度。若再配以 jquery 內建的動畫效果，其完全可以與瀏覽器自帶的狀態條媲美。
先來看乙個演示：位址
。要得到演示上的進度條效果，首先，引入 jquery 框架(一定要放在頁頭標籤內)。然後在 標籤起始位置放置：
css 可以這麼寫：
#loading
#loading div
準備工作到這裡就做好了。
接著，請隨意發揮，依照你對圖二的理解，在模板各個部分的適當位置放置：
其中紅色數值應該隨載入順序逐步增加，直到 footer.php。另外別忘了在 footer.php 最末尾放上：
用於載入完畢後隱藏進度條。
jQuery 頁面載入進度條
頁面 loading 條基本人人都會用。它的原理很簡單 在頁頭放置乙個文字或者的 loading 狀態，然後頁尾載入一段 js 隱藏掉，即根據瀏覽器的載入順序來實現的簡易 loading 狀態條。上圖展示了傳統 wordpress 模板在瀏覽器中的載入順序，loading 條的出現和消失分布於頭尾。...
jQuery 頁面載入進度條收藏
頁面 loading 條基本人人都會用。它的原理很簡單 在頁頭放置乙個文字或者的 loading 狀態，然後頁尾載入一段 js 隱藏掉，即根據瀏覽器的載入順序來實現的簡易 loading 狀態條。上圖展示了傳統 wordpress 模板在瀏覽器中的載入順序，loading 條的出現和消失分布於頭尾。...
頁面載入進度條
第一 load fakeprogress 0,sb 第二 第三 load go 0 第四 loading.第五 load location.href url oncontextmenu window.event.returnvalue false ondragstart window.event.r...