NProgress.js显示页面加载的进度

Question

我试图弄清楚如何使用NProgress.js作为网站上所有页面的通用页面加载.我无法找到任何文档或一种简单的方法来在页面加载时添加此加载效果,并在整个页面加载后完成.

http://ricostacruz.com/nprogress/

任何帮助是极大的赞赏!

Answer 1

简单地说,将此JavaScript放在html中的任何位置,将它放在结束体标记之前是一个好习惯:

<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>

哦,不要混淆,NProgress在全局范围内,它与jQuery无关,我只是为了方便而使用jQuery .load()/ .unload()并且请不要把NProgress.start()jquery文件放在里面.ready(),这是无用的混乱.

Answer 2

在主页中： http: //ricostacruz.com/nprogress/

我发现了这个（带有显示页面源代码）：

<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>

如您所见，您需要使用 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>