8

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

http://ricostacruz.com/nprogress/

任何帮助是极大的赞赏！

4

4 回答 4

25

简单地说，将此 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>

哦，别搞混了，NProgress 是全局作用域的，跟 jQuery 没有关系，我用 jQuery 的.load()/.unload()只是为了方便，请不要把NProgress.start()里面的 jquery 文档放在里面.ready()，没用的乱七八糟的。

于 2014-02-26T03:26:34.487 回答
3

在主页：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 就绪功能）：

<script>
NProgress.start();
NProgress.set(0.4);
//Increment 
var interval = setInterval(function() { NProgress.inc(); }, 1000);
$(document).ready(function(){
    NProgress.done();
    clearInterval(interval);
});
</script>
于 2013-09-11T18:53:31.573 回答
0

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

我敢肯定，您只需取出自定义滚动条的东西，它就会达到预期的效果。我正在调整lis 的大小，#user-book-list ul结果，看到了无样式元素的快速闪现。nprogress 帮助隐藏了这一点，但现在图像刚刚弹出。fadeIn()效果或类似的东西可以缓解这个问题......哈哈。

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

我现在使用它而不是 nprogress。也不需要依赖项。

于 2013-10-11T01:50:10.553 回答
0 
<script>
        NProgress.configure({
            showSpinner: false
        });
        NProgress.start();
</script>

在body标签下添加上面的脚本并打开我的GitHub存储库链接，您将获得脚本将其添加到您的页面

https://github.com/mateentechbits/showSpinner_js_scripts/blob/main/nprogress.js

于 2022-02-04T08:12:42.163 回答