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

最近在做一个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动画也将消失。

使用spin.js优化等待ajax返回时的页面效果的更多相关文章

  1. jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  2. jQuery实现Ajax请求时,页面显示等待的效果,超过指定请求时间后,进行其他操作

    背景:有一个按钮,点击之后向后端程序发起Ajax请求,在请求结果没有返回之前,页面显示等待的效果,此时仍旧是异步请求,等待的效果在接收到结果后撤销. 需求:因为网络延迟或者后端程序的问题,在发起Aja ...

  3. php ajax返回无故刷新页面

    1 前言 一个php页面,里面两个$.POST请求,一个会刷新页面,一个不会,然后就拉出来研究一下了,仅作为记录使用. 2 代码 HTML代码: <input value="查找&qu ...

  4. js简单实现删除记录时的提示效果

    删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css">  ...

  5. Jquery 等待ajax返回数据loading控件ShowLoading组件

    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...

  6. 付款前.检查状态.防止重复付款,需要ajax设置为同步,等待ajax返回结果再使用

    $("#surePay").on("touchstart",function(){ var apply_id = $('#apply_id').val(); v ...

  7. 移动端点击返回时强制页面刷新解决办法(pageshow)

    在做移动端项目的时候经常遇到这样一个功能比如: 返回后页面不刷新,一些失效的信息依然显示在页面上.这个问题在iphone手机上会出现,在Android手机上返回时会自动刷新(由于手机机器种类不多,无法 ...

  8. ajax返回正个页面

       

  9. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

随机推荐

  1. 树莓派进阶之路 (019) - 树莓派通过filezilla,samba与PC文件共享(转)

    虽然我们可以很方便的通过ssh譬如putty或者vnc连接操控树莓派,但是毕竟树莓派资源没那么高,在上面编程,调试要吃力的多.所以还是想在pc上编程上传到树莓派或者最好,文件共享,可以直接读写共同的文 ...

  2. 【Spring】Spring之事务处理

    编程式事务 /** * 1. 根据DataSource去创建事务管理器 * 构造方法 , 参数1. DataSource */ DataSourceTransactionManager txManag ...

  3. ASP.NET Core网站初探

    原文地址:https://blog.csdn.net/iml6yu/article/details/74530679 目录结构如下图   目录: Properties:属性,记录了项目属性的配置文件. ...

  4. sql中union 和 union all的区别

    最近发现一个视图出奇的慢,在生产环境还好,由于服务器配置较高,没有察觉出来.但是做了一次修改后在开发版 和测试版就直接查询不出结果了.就连select count(1) from 都运行2个小时没有结 ...

  5. preg_match用法

    preg_match 利用 preg_match(),我们可以完成字符串的规则匹配.如果找到一个匹配,preg_match() 函数返回 1,否则返回 0.还有一个可选的第三参数可以让你把匹配的部分存 ...

  6. /proc 目录详细说明

    /proc路径详细: Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...

  7. tomcat启动报错 java.lang.ClassNotFoundException: org.apache.jsp.index_jsp

    项目运行一直很平稳,但是换了tomcat之后打开jsp网页时就报错,描述如下: 1. 错误描述 打开jsp网页时报错 java.lang.NullPointerException     org.ap ...

  8. 为什么有时候PHP没有闭合标签结束符 ?>

    找了一些资料,大家对PHP闭合标签的总结如下: 好处:如果这个是一个被别人包含的程序,没有这个结束符,可以减少很多很多问题,比如说:header, setcookie, session_start这些 ...

  9. [转]Java中使用Runtime和Process类运行外部程序

    帖子1: 使用Runtime.getRuntime().exec()方法可以在java程序里运行外部程序.  1. exec(String command)  2. exec(String comma ...

  10. Markdown语法与入门

    Markdown语法与入门   Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的 ...