頁面載入進度條收藏

2021-09-01 04:53:45 字數 598 閱讀 4291

上圖展示了傳統 wordpress 模板在瀏覽器中的載入順序,loading 條的出現和消失分布於頭尾。

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

。要得到演示上的進度條效果,首先,引入 jquery 框架(一定要放在頁頭標籤內)。然後在 標籤起始位置放置:

css 可以這麼寫:

#loading

#loading div

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

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

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

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

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...

jQuery 頁面載入進度條

頁面 loading 條基本人人都會用。它的原理很簡單 在頁頭放置乙個文字或者的 loading 狀態,然後頁尾載入一段 js 隱藏掉,即根據瀏覽器的載入順序來實現的簡易 loading 狀態條。上圖展示了傳統 wordpress 模板在瀏覽器中的載入順序,loading 條的出現和消失分布於頭尾。...