jquery - NProgress.js 显示页面加载进度

Question

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

http://ricostacruz.com/nprogress/

非常感谢任何帮助!

Answer 1

简单地说，将此 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() 中，它是无用的困惑。