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

问题描述

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

I have a huge xml file which i am transforming using xslt. I am also doing a lot of stuff using jquery on page load. Basically hiding a lot of divs and opening them up after onclick. Because of this the page load takes like 2-3 seconds now.

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

I thought it would be good to show a progressbar while it loads so the user knows that the page is getting loaded instead of them staring at a white screen. When looking up the jquery UI progressbar i found out that it has a value attribute which determines the length of the bar.

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

现在，正如我已经告诉我的js文件，其中有一个巨大的$(document).ready(function() { ...... });可以加载整个页面.我如何获取页面已加载多少的值，以便可以将其传递给progressbar的value属性?

Now as i already told my js file has one huge $(document).ready(function() { ...... }); which loads the whole page. How do i get that value of how much the page has loaded so that i can pass it to the value attribute of the progressbar ?

推荐答案

$(document).ready在加载DOM之前不会触发，因此不会有太大帮助.

$(document).ready doesn't fire until the DOM is loaded, so this won't be much help.

鉴于您不知道文档的大小(在您的JavaScript中)，很难准确地做到这一点.

Given that you don't know how big the document will be (in your JavaScript) this will be hard to do accurately.

一种解决方案可能是在文件顶部包括一些信息，这些信息指示期望元素的方式.然后，您可以计算DOM中的元素，并了解您的完成程度.

One solution might be to included some information at the top of the file that indicates how may elements to expect. You could then count the elements in the DOM and get an idea of how complete you are.

您可以使用计时器或间隔开始查看文档，然后再继续操作直到达到100％；

You could use a timer or interval to start looking before the document is ready and keep going until you hit 100%;

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

您需要在页面顶部附近放置expected元素.

You would need the expected element close to the top of the page.

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

这篇关于如何找出页面已加载的百分比以更新jQuery UI进度栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！