jQuery NProgress.js 显示页面加载进度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18746777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NProgress.js to show progress of page loading
提问by Aaron
I am trying to figure out how to use NProgress.js as a generic page load for all pages on a site. I am unable to find any documentation or an easy way to add this loading effect on page load and have it finish when the entire page has loaded.
我想弄清楚如何使用 NProgress.js 作为站点上所有页面的通用页面加载。我找不到任何文档或一种简单的方法来在页面加载时添加此加载效果，并在整个页面加载后完成。
http://ricostacruz.com/nprogress/
http://ricostacruz.com/nprogress/
Any help is greatly appreciated!
任何帮助是极大的赞赏！
回答by Nabil Kadimi
Simply put, place this JavaScript anywhere in your html, it's a good practice to place it before the closing body tag:
简单地说，将此 JavaScript 放在 html 中的任何位置，将它放在结束 body 标记之前是一个好习惯：
<script>
// Show the progress bar
NProgress.start();
// Increase randomly
var interval = setInterval(function() { NProgress.inc(); }, 1000);
// Trigger finish when page fully loaded
jQuery(window).load(function () {
clearInterval(interval);
NProgress.done();
});
// Trigger bar when exiting the page
jQuery(window).unload(function () {
NProgress.start();
});
</script>
Oh and don't be confused, NProgress is in the global scope, it has nothing to do with jQuery, I'm using jQuery's .load()/.unload()for convenience only, and please don't put the NProgress.start()inside a jquery document's .ready(), it's useless clutter.
哦，不要混淆，NProgress 是在全局范围内，它与 jQuery 无关，我使用 jQuery 的.load()/.unload()只是为了方便，请不要将其NProgress.start()放在 jquery 文档的内部.ready()，它是无用的混乱。
回答by rodrigoio
In the main page: http://ricostacruz.com/nprogress/
在主页：http: //ricostacruz.com/nprogress/
I found this (with show page source code):
我发现了这个（带有显示页面源代码）：
<script>
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
$("#b-0").click(function() { NProgress.start(); });
$("#b-40").click(function() { NProgress.set(0.4); });
$("#b-inc").click(function() { NProgress.inc(); });
$("#b-100").click(function() { NProgress.done(); });
</script>
As you can see, you need to use NProgress.start(); to starts de progress bar. Try something like this (i used jquery ready function):
如您所见，您需要使用 NProgress.start(); 开始进度条。尝试这样的事情（我使用了 jquery ready 函数）：
<script>
NProgress.start();
NProgress.set(0.4);
//Increment
var interval = setInterval(function() { NProgress.inc(); }, 1000);
$(document).ready(function(){
NProgress.done();
clearInterval(interval);
});
</script>
回答by NetOperator Wibby
I am working on something with nprogress and came across your question. I am also using a scrollbar plugin and this is what I came up with:
我正在做一些有 nprogress 的事情，遇到了你的问题。我也在使用滚动条插件，这就是我想出的：
<script>
(function($) {
NProgress.start();
$("#user-book-list").hide();
setTimeout(function() {
$(window).load(function() {
$("#user-book-list").show();
$("#user-book-list").mCustomScrollbar({
autoHideScrollbar: false,
horizontalScroll: true,
theme: "dark-thin",
advanced: { autoExpandHorizontalScroll: true, updateOnContentResize: false }
});
NProgress.done();
});
});
})(jQuery);
</script>
I'm sure you can just take out the custom scrollbar stuff and it'll achieve the desired result. I am sizing the lis in the #user-book-listuland as a result, see a quick flash of unstyled elements. nprogress helped hide this, but now the images just pop in. A fadeIn()effect or something like that will ease that issue...lol.
我相信你可以去掉自定义滚动条的东西，它会达到预期的结果。我正在调整lis 中的s大小，#user-book-listul结果，看到了无样式元素的快速闪烁。nprogress 帮助隐藏了这一点，但现在图像只是弹出。fadeIn()效果或类似的东西将缓解这个问题......大声笑。
EDIT: HubSpot's been cranking out some good open-source projects. One of which is a loader, inspired by nprogress, but is much easier to implement: http://github.hubspot.com/pace/docs/welcome
编辑：HubSpot 一直在开发一些好的开源项目。其中之一是加载器，受 nprogress 启发，但更容易实现：http://github.hubspot.com/pace/docs/welcome
I am now using this instead of nprogress. No dependencies requires as well.
我现在正在使用它而不是 nprogress。也不需要依赖项。
