Jquery+NProgress实现网页进度条显示
前端开发中,进度条库是常见的库之一,bootstrap中提供了多种进度条样式,其中NProgress.js是一款轻量级的进度条组件,使用简便。
NProgress可实现的进度条效果,如下图所示。
官网下载NProgress
网址:http://ricostacruz.com/nprogress/
下载如下所示文件【nprogress.css】与【nprogress.js】:
使用方法:
(1)引入nprogress.js和nprogress.css到项目中
(2)调用start() 和 done()来控制进度条
NProgress.start(); //进度条开始
NProgress.done(); //进度条结束
使用案例:将其运用于Ajax请求与响应之间的等待时间
注:请重点关注如下图中代码
图1:引入【nprogress.css】
图2:引入【nprogress.js】
图3:引入【jquery】
图4:使用【 NProgress.start()】与【 NProgress.done()】函数
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页面</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="../nprogress.css">
<style>
.loading {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .6);
font-size: 30px;
}
</style>
<script src="../nprogress.js"></script>
</head>
<body>
<div class="container pt-4">
<h1>会员中心</h1>
<hr>
<div class="row">
<aside class="col-md-3">
<div class="list-group">
<a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
<a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
<a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
</div>
</aside>
<main id="main" class="col-md-9">
<h2>我的个人资料</h2>
<hr>
</main>
</div>
</div>
<div class="loading">正在玩命加载中...</div>
<script src="../jquery.js"></script>
<script>
$(function ($) {
$(document)
.ajaxStart(function () {//ajax执行开始前触发函数
NProgress.start()
})
.ajaxStop(function () {//ajax执行结束后触发函数
NProgress.done()
})
// 有一个独立的作用域,顺便确保页面加载完成执行
$('.list-group-item').on('click', function () {
var url = $(this).attr('href')
$('#main').load(url + ' #main > *')
return false
})
})
</script>
</body>
</html>