平时 ajax 请求时响应时间较长会设置一个转圈的载入动画,但是如果再加上数字表示百分比是不是更能减少用户使用中的焦虑呢?效果:
以下以一个 ajax 请求为例:
$.ajax({url: "http://cway.top": function (XMLHttpRequest) {
layer.load(1, {content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'> 正在查询 (<span id='loadProgress' >0</span>%)</div>",
shade: [0.5, '#000']
});
start();}, success: function (result) {layer.closeAll();
stop();}
});
上述在载入动画上加上正在查询的文字跟载入百分比,初始值 0%。其中启动了一个 start() 方法启动定时器,在定时器中对百分比进行增加,我这里是设置每 200ms 增加 5%:
function show() {$("#loadProgress").text(parseInt($("#loadProgress").text()) + 5);
if (parseInt($("#loadProgress").text()) >= 95) {stop();
}
}
var timer;// 定义在两个函数外面,因为两个函数都会用到!
function start() {timer = window.setInterval(show, 200);// 每隔 200ms 调用一次 show 函数
}
function stop() {timer = window.clearInterval(timer);
$("#loadProgress").text(99);
}
当大于 95% 时停止计时器,并将百分比固定在 99%,如果请求一直没响应那就卡 99 了,不过一般请求一般都不会卡在这,毕竟请求长时间没响应的情况很少。