jquery - 如何找出页面已加载的百分比以更新 jQuery UI 进度条？

Question

我有一个巨大的 xml 文件，我正在使用 xslt 对其进行转换。我还在页面加载时使用 jquery 做了很多事情。基本上隐藏了很多div并在onclick后打开它们。因此，页面加载现在大约需要 2-3 秒。

我认为在加载时显示进度条会很好，这样用户就知道页面正在加载，而不是盯着白屏。当查找 jquery UI 进度条时，我发现它有一个 value 属性来确定进度条的长度。

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

现在，正如我已经告诉我的 js 文件有一个巨大的 $(document).ready(function() { ...... }); ，它会加载整个页面。如何获取页面已加载量的值，以便将其传递给进度条的 value 属性？

Answer 1

$(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" />