如何找出頁面加載的百分比，以更新jQuery UI進度條？

我有一個巨大的XML文件，我正在使用xslt進行轉換。我也在頁面加載中使用jquery做了很多事情。基本上隱藏了很多div，並在onclick後打開它們。正因爲如此，頁面加載現在需要2-3秒。如何找出頁面加載的百分比，以更新jQuery UI進度條？

我認爲在加載時顯示進度條會很好，所以用戶知道頁面正在加載而不是盯着白色屏幕。當查找jQuery UI進度條時，我發現它有一個值屬性，它決定了欄的長度。

$("#progressbar").progressbar({ value: 37});

現在，當我已經告訴我的js文件有它加載整個頁面一個巨大$(document).ready(function() { ...... });。我如何獲得頁面已加載多少的值，以便我可以將它傳遞給進度欄的值屬性？

來源

2012-11-01 Pradep

你最好只顯示一個不確定的進度條。 –

在函數中的各個點上，根據您對自身距離的估計來更新進度條的值。 –

$(document).ready直到DOM被加載纔會觸發，所以這不會有太大的幫助。

鑑於您不知道文檔的大小（在您的JavaScript中），這將很難做到準確。

一個解決方案可能是在文件的頂部包含一些信息，指出元素的期望值。然後，您可以計算DOM中的元素，並瞭解您的完整程度。

您可以使用定時器或間隔開始查看文檔準備就緒，並繼續前進，直到您達到100％;

if (document.getElementById('expected')) { 
    var expected = parseInt(document.getElementById('expected').value, 10); 
    var loaded = document.getElementsByTagName('div'); 
    var progress = (loaded/expected) * 100; 
}

您將需要靠近頁面頂部的expected元素。

<input type="hidden" id="expected" value="50" />

來源

2012-11-01 17:27:44 Fenton

*「$（document）.ready在加載DOM之前不會觸發」*它在DOM準備好時觸發，而不是在加載時觸發。 –

@KevinB，這裏有什麼區別？ DOM完全加載後才準備就緒。 – acelent

雖然這並非如此。在圖像加載完成之前DOM已準備就緒。（無視IE6/7/8中已存在太晚觸發的錯誤） –

如何找出頁面加載的百分比，以更新jQuery UI進度條？

回答

相關問題