web前端動態新增進度條
阿新 • • 發佈：2019-02-15
為了網路延遲載入或者為了防止提交後重復點選提交按鈕，比較好的方式就是顯示一個比較優雅的進度條
原始碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>進度條</title>
<style>
*{
padding: 0;
margin: 0;
}
.loading{
width 可以自己調整css樣式實現多種多樣的進度條樣式
可以將上面的js程式碼封裝到common.js,可以在做網路請求的時候做相應的顯隱操作
/**
* 顯示進度條
* @param msg 進度條下面顯示的內容
*/
function showLoading(msg) {
var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ;
$("body").append(ahtml);
}
/**
* 隱藏進度條
*/
function hiddleLoading() {
$(".loading").fadeOut(100);
}網路請求進度條
httpUtils.js如下
/**
* 網路請求
* @author jiangrongtao
* Created by on 2017-10-8.
*/
/**
* 訪問方式 get 和 post
* @type {string}
*/
var REQUEST_POST='post';
var REQUEST_GET='get';
/**
* 超時時間
*/
var OUT_TIME_LEVAl_1=1000;
var OUT_TIME_LEVAl_2=2000;
var OUT_TIME_LEVAl_3=3000;
/**
*
* @param url 請求路徑
* @param timeout 超時時間
* @param data 提交引數
* @param successCallBack 請求成功的回撥
* @param errorCallBcak 請求失敗的回撥
* @param msg 進度條顯示的資訊
* @param requestType 請求方式get post
*/
function httpAjax(url,timeout,requestType,data,successCallBack,errorCallBcak,msg){
var isShow=false;
//顯示進度條
if(!isShow){
showLoading(msg);
isShow=true;
}
$.ajax({
url:url,
timeout : timeout,
type : requestType,
data :data,
dataType:'json',
success:function(result){
// 去掉進度條
if(isShow){
hiddleLoading();
isShow=false;
}
console.log("success");
successCallBack(result);
},
error:function (XMLHttpRequest,errorMsg,ex) {
// 去掉進度條
if(isShow){
hiddleLoading();
isShow=false;
}
console.log("error");
errorCallBcak(errorMsg);
}
});
}
/**
* 顯示進度條
* @param msg 進度條下面顯示的內容
*/
function showLoading(msg) {
var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ;
$("body").append(ahtml);
}
/**
* 隱藏進度條
*/
function hiddleLoading() {
$(".loading").fadeOut(100);
}具體的使用場景 一般在onclick中
$(document).ready(function(){
httpAjax(SELECT_USER_BY_ID,OUT_TIME_LEVAl_3,REQUEST_GET,null,
function successCallBack(result) {
console.log(result);
initData(result.status);
},function errorCallBcak(errorMsg){
var errorContent = '<p>請求服務失敗，請稍後<a href="xxx.html" style="color:blue">重試</a>！</p>';
$("body").html(errorContent);
},'載入中...');
});