使用spin.js优化等待ajax返回时的页面效果

[本文出自天外归云的博客园]

最近在做一个JIRA信息统计的系统，在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端，时间较长，所以要添加一段等待时的loading画面，使用spin.js实现效果如下：



使用方法：

1. 在js函数中准备弹出loading效果的地方加上如下代码，弹出loading画面，以下为“调用代码”：

bootbox.dialog({
message:'<div style="text-align:center;height:150px;padding-top:65px;" id="spinMessage">关联JIRA信息统计中...</div>' +
'<div id="saving"></div>',
buttons:{
ok:{
label: '确定',
className: 'hidden savingBtn'
}
}
});
var spinner = new Spinner({radius: 30, length: 0, width: 10, color: '#286090', trail: 40}).spin(document.getElementById('saving'));

2. 在js函数中ajax返回结果后的地方加上如下代码，提示完成并关闭loading画面，以下为“关闭代码”：

spinner.spin();
$("#spinMessage").html('<font style="font-size:20px" color="green"><strong>统计完成!</strong></font>');
var savingBtn = document.getElementsByClassName('savingBtn')[0];
setTimeout(function(){
savingBtn.click();
}, 1000);

关于spin.js的用法详解，见官网。

另外：和Spring MVC+Freemarker结合的情况下，如果不用ajax的话，可以为相应的元素（例如：a标签）添加onclick事件，在onclick对应函数中添加“调用代码”。而href对应要跳转的页面。页面跳转请求会被后端controller处理，处理完成后返回相应的前端ftl页面，这时候页面会自动刷新，loading动画也将消失。