jquery網頁載入進度條思路？

01-03

我的思路是$(document).ready()和window.onload聯合控制當windowonload後呢就都是100% 消失，有沒有更好的辦法能知道頁面所有的元素載入了到底是30% 還是80%呢
順便問一下 ajax的success方法中是頁面裡面所所有的元素都載入完成還是dom元素載入完成呢

原理很簡單。。

你在頁面不同的位置的dom節點上增加一個自定義屬性比如data-progress=20 data-progress=80

然後你在頁面頭部設置一個start函數，再在頁面onload的時候設置一個end函數。

在頁頭執行你的js，每讀取到一個data-progress就對應給進度條做動畫即可。

這和jq貌似沒什麼關係。。

關鍵細節是如何依次讀取到這個自己設置的progress呢？很簡單，設置個setInterval，然後不斷的讀帶data-progress的節點，讀到一個新的設置一下，記下位置就好了。end的時候清掉定時器就ok了。

參見這個項目：

Progress.js - Themeable progress bar library

----

才看見後面還有個問題，ajax的success 是指返回200的響應頭，可以理解成網頁資源的字元載入完畢。

頁面運行js的時候實際上並不知道將要加載多少東西。

一個思路是在發布時用構建工具精確計算build size，每個文件大小。在瀏覽器上根據已加載的文件和大小，就可以知道加載的進度，事實上很多遊戲都是這麼做的。

然而這裡面還有很多細節，gzip壓縮會影響文件傳輸量，執行環境的不同會影響程序邏輯進而導致有些文件不需要加載或者需要加載更多（例如使用很廣泛的2x圖片/multiple source media等）。

也是可以做，但是要達到精準，裡面的坑很多，要做好不容易。

然而我個人認為加載進度實際上是個偽需求，用戶其實並不關心進度，你也不關心。

你的關注點是load timing，加載過程中的跳出率之類的東西，這個過程可以結合performance.timing api，以及統計系統來量化、定位和解決。

與其給用戶一個進度條，不如精簡代碼、加強CDN、配置緩存、使用appcache、壓縮文件、減少頁面生成時間，諸如此類的事情。

另外我們通常使用的ajax，亦即XMLHttpRequest，大多數情況下並不涉及到DOM，更與DOM元素的解析和加載毫無關係。

我覺得這個思路不太對。

如果你的頁面很小，進度條沒必要。

如果你的頁面很大，你為了首屏性能，你應該先載入簡單的框架，然後用 Ajax 技術把其餘部分進行非同步載入，而進度條模塊提供一個用來「加進度」的方法，一律在 Ajax 請求的回調函數中調用「加進度」方法。在 $(document).ready() 中調用一個初始化 progress.init() 方法就好。

progress.init() 可以傳入一個參數來告訴 progress 模塊一共有多少個 Ajax 請求。

寫自己小項目時也想用進度條（載入遊戲的效果，多炫啊！），自己實現畢竟太麻煩，因為：

沒有更好的辦法能知道頁面所有的元素載入了到底是30% 還是80%

之後，找了個jq插件（Circular Progress Bar），然後研究其實現以及用法；

最後， 還是沒辦法知道頁面所有的元素載入了到底是30% 還是80%

用了jq插件的進度條也只能是偽載入，設定多少秒後進度條載入完成。

結果，還是老老實實滾回用loading gif圖標！非同步載入數據完成隱藏loading圖標就好了嘛；

（多個非同步？用promise相關庫好了，jq就有deferred實現promise）

順便答一下，ajax的success不是dom或所有元素（所有資源）完成，而是請求完成：

有兩個進度條組件，你可以用下，研究下源碼就知道啦，nprogress和pace.js

其實你要真是用jquery的話，倒是有很多這樣的插件，但其實實現思路就是樓上所說的，給幾個dom加一個錨點之類的，然後讀到對應的部分更新一下

似乎沒必要這麼真實。因為用戶即使知道剩下還有10%，也沒法判斷是該接著等還是關掉網頁，因為下載速度不確定。另外，你得到文檔之後只知道所需下載的元素數量，但不知道元素各自有多少比特，所以即使速度恆定，也不知道什麼時候能載入完。貌似只有你正式請求的時候才知道一個文件的大小。

所以這個條只能是模擬的，安慰一下用戶而已。