jQuery UI：如何将进度条应用于网页？答案

【问题标题】：jQuery UI: how to apply the Progressbar to a webpage?jQuery UI：如何将进度条应用于网页？
【发布时间】：2014-06-17 00:08:35
【问题描述】：

您如何将 jQuery UI Progressbar 应用到网站的加载进度（在初始加载期间）？

对此的任何帮助将不胜感激。 :)

【问题讨论】：

如果它用于普通页面，您可以伪造它请参阅这些教程 --- tutorialspoint.com/jqueryui/jqueryui_progressbar.htm -- 如果您的页面有图像，那么您需要做一些数学运算，例如页面上的 10 个图像是加载到页面的每个图像在进度条上缩放 10%。在这种情况下，您将需要知道每个图像何时加载，以便您可以增加条形 - 您可以使用称为图像加载的插件 --- imagesloaded.desandro.com
你的意思是这样的。 onextrapixel.com/examples/youtube-like-ajax-loading-bar

标签： jquery jquery-ui progress-bar loading

【解决方案1】：

您可以使用Pace.js Javascript Library 作为进度条。你可以在代码的最顶层编写这样的代码：

<link href='pace.css' rel="stylesheet">
<script type="text/javascript">
    paceOptions = {
        ajax: false,
        document: true,
        eventLag: false,
        elements: {
            selectors: ['body']
        }
    };
</script>
<script type="text/javascript" src="pace.min.js"></script>

【讨论】：

速度似乎对我的需要来说太快了。我希望能够pseudo-realistically 更改速率，就像我在这里所做的那样：jsfiddle.net/mnbishop017/L5V6F
@017Bluefield 好的..如果它适合你，你可以和你一起玩。 :)
实际上，至少有什么办法可以减慢速度吗？
减速是什么意思？它根据您的文档加载运行。
好吧，塔索斯说我可以伪造它。我知道我可以用这种代码做到这一点：if (val < 100) { timeoutHook = setTimeout(progress, 1); if (val >= 30) {begin.progressbar("value", val + 0.1);} if (val >= 50) {begin.progressbar("value", val + 0.6);} … }