nprogress.js页面加载进度条

nprogress 是一个轻量级的 JavaScript 页面加载进度条库。

<link href="nprogress.min.css" rel="stylesheet"/>  
<script src="/js/jquery.js"></script>
<script src="nprogress.min.js"></script>
    <div style="text-align: center;">
        <a href="javascript:submit('点击')">点击</a>
        <a href="javascript:submit('删除')">删除</a>
        <div id="msg"></div>
    </div>
<script>
// 配置nprogress的一些基本选项（可选）  
NProgress.configure({ showSpinner: false }); // 隐藏加载时的旋转器  
  
// 监听页面加载事件  
document.addEventListener('DOMContentLoaded', startProgress); // DOM 完全加载并解析完成，不包括样式表、图片和子框架的加载  
window.addEventListener('load', stopProgress); // 页面完全加载完成，包括样式表、图片和子框架  
  
function startProgress() {  
    NProgress.start(); // 开始显示进度条  
}  
  
function stopProgress() {  
    NProgress.done(); // 进度条完成  
} 

function submit(s){
    NProgress.start(); // 开始显示进度条  
        $.ajax({
            type: "POST",
            cache: true,
            dataType: "json",
            url: "?act=submit",
            data: { "s": s }, 
            success: function(data) {  
                NProgress.done(); // 进度条完成  
                $("#msg").html(data.info)
            }
        });
}
</script>