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

我有一个巨大的xml文件，我正在使用xslt进行转换。 我也在页面加载时使用jquery做了很多事情。 在onclick之后，基本上隐藏了很多div并打开它们。 因此，页面加载现在需要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元素。