Question

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

非常感谢任何帮助！

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>

Answer 3

我正在与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>

我相信你可以拿出自定义滚动条的东西，它会达到预期的效果。我正在调整li #user-book-list中ul的大小，结果看到了一些没有风格的元素。 nprogress帮助隐藏了这个，但现在图像刚刚出现。fadeIn()效果或类似的东西会缓解这个问题...大声笑。

编辑：HubSpot一直在开发一些优秀的开源项目。其中一个是加载器，受nprogress的启发，但更容易实现：http://github.hubspot.com/pace/docs/welcome

我现在使用的是代替nprogress。也没有依赖性。

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

3 个答案: