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

最近在做一个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. iOS 10 的一个重要更新-开发 iMessage 的第三方插件

    苹果官方的 Messages 在 iOS 10 推出了非常重大的更新,可能主要是想从其他 IM 巨头手里抢点市场份额回来,包括 Facebook Messenger, Wechat 和 Snapcha ...

  2. 树莓派进阶之路 (034) - 基于linux的ftp脚本

    基于linux的ftp脚本: #!/bin/sh cd echo "彻底卸载原有的ftp" sudo apt-get remove --purge vsftpd #(--purge ...

  3. Less入门与安装(转)

    快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览 ...

  4. MySQL的timestamp类型自动更新问题

    今天建了一个表,里面有一个列是timestamp类型,我本意是在数据更新时,这个字段的时间能自动更新.岂知对这个类型的值还不甚了解,导致出错.发现这个字段只是在这行数据建立的时候有值,在更新的却无变化 ...

  5. 验证时出错。HRESULT = &#39;8000000A&#39;

    这本来是在VS2005下创建的一下项目,后来改用VS2010的开发环境,.NET Framework的版本号还是使用2.0, 但每次生成之后都会在解决方式的同级文件夹下产生一个名称乱码的文件夹, 攻克 ...

  6. Fiddler基础用法-抓取浏览器数据包

    Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...

  7. mysql数据导入遇到的timestamp类型问题

    今天准备把最新的表导入自己以前的机子上做临时开发,在数据库导入的时候遇到一个问题:Incorrect table definition; there can be only one TIMESTAMP ...

  8. Processing支持中文显示

    Processing 默认不支持中文,中文显示成框框,我使用的版本是:2.2.1,进行如下设置,并且重启processing就可以支持中文了: 可以看到中文了:

  9. 脚本采集数据插入到influxdb数据库里

    #!/bin/bash # 定时收集java服务metrics # curl http://10.7.16.42:6301/metrics demo # 参数: post_influxdb_write ...

  10. ubuntu18.04优盘只读问题

    1.打开终端,查看系统日志文件: tail -f /var/log/syslog 2.插入优盘. 3.系统文集syslog输出以下内容: Feb :: noi dbus-daemon[]: [sess ...