//导出表格加载中的提示
var dian=0;//控制'●'的个数
var t=null;//停止时使用
function id_loadspot(loadspotSpan,loadingDiv,exportLink){
  loadingDiv.css('visibility','visible');//显示
  exportLink.click(function(){//使链接失效
    return false;
  });
  t=setTimeout(function() {
    if (dian >= 3) {
      loadspotSpan.text('');
      dian = 0;
    } else {
      dian++;
      loadspotSpan.text(loadspotSpan.text() + '●');
    }
    id_loadspot(loadspotSpan,loadingDiv,exportLink);//递归调用
  }, 1000);

}
//停止加载中的提示
function stop_id_loadspot(loadingDiv,exportLink){
  clearTimeout(t);//停止定时器
  loadingDiv.css('visibility','hidden');//隐藏
  exportLink.unbind("click");//使链接生效
}

//页面

<div  style="width: 10%; height: 30px; float: right; text-align: left;">
<a href="javascript:exportMerchantExcel();"  style="text-align: center;" class="audit" id="exportLink">导出</a>
  <div style="display: inline-block;visibility:hidden; width: 66px; text-align: left;" id="loadingDiv">
    加载中<span id="id_loadspot"></span>
  </div>
</div>

//使用

seachKey = $("#merchantName").val();
status =$('#upsfyx').combobox('getValue');

//加载中...
id_loadspot($('#id_loadspot'),$("#loadingDiv"),$("#exportLink"));
$.ajax({
  url : '../system/cisweb/exportMerchantExcel',
  dataType : "json",
  type : "post",
  data : {
  seachKey : seachKey,
  status:status,
  },
  success : function(data) {
  if (data.status == "succeed") {
    $("#download").attr("href", data.path);
    $("#subBtn").trigger("click");
  } else {
  $.messager.alert('提示', data.msg, 'error');
}
},
error : function(err) {
  $.messager.alert('提示', err.msg, 'error');
},

complete:function(jqXHR, textStatus){
  stop_id_loadspot($("#loadingDiv"),$("#exportLink"));//停止加载中的提示
}

});

jQuery实现加载中效果,防止重复提交的更多相关文章

  1. 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

    在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...

  2. WPF防止界面卡死并显示加载中效果

    原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...

  3. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  4. jquery实现加载更多效果

    情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...

  5. JQuery 数据加载中禁止操作页面

    比较常见的做法,但对我而言是第一次做,记录一下. 为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime. 有学到一些额外的东西. 先将div及img定义好 <bo ...

  6. Android 三种方式实现自定义圆形页面加载中效果的进度条

    转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...

  7. 【转】WPF防止界面卡死并显示加载中效果

    原文地址:http://www.cnblogs.com/linyijia/archive/2013/02/06/2900609.html <Window x:Class="Loadin ...

  8. CSS3实现加载中效果

    代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <tit ...

  9. loading加载中效果

    (function(){ try{ var ui={ loading:{ addCssStyle:function(text) { var head = document.getElementsByT ...

随机推荐

  1. [hdu4960]Another OCD Patient(区间dp)

    题意:给出n个数,把这n个数合成一个对称的集合.每个数只能合并一次. 解题关键:区间dp,dp[l][r]表示l-r区间内满足条件的最大值.vi是大于0的,所以可以直接双指针确定. 转移方程:$dp[ ...

  2. maven 打JAR包资源文件指定路径与文件读取

    1.配置RESOURCES节点 有时会遇到maven打包后找不到资源文件了,其实这时候路径发生了变化,为了确保打包后路径不发生变化,指定一个固定的路径,请看下面配置 <build> ... ...

  3. PandaSeq安装报错ltld required, install libtool library

    PandaSeq安装 $ ./autogen.sh && ./configure && make && sudo make install PandaS ...

  4. 8、泛型程序设计与c++标准模板库1、泛型程序设计的概念和术语

    有效地利用已有的成果,将经典的.优秀的算法标准化.模块化,从而提高软件的生产率,是软件产业化的需求,为了实现这一需求,不仅需要面向对象设计思想,而且需要泛型程序设计思想. c++语言提供的标准模板库( ...

  5. javascript 数组中出现的次数最多的元素

    javascript 数组中出现的次数最多的元素 var arr = [1,-1,2,4,5,5,6,7,5,8,6]; var maxVal = arr[0]; // 数组中的最大值 var min ...

  6. 聊聊 CDN 缓存与浏览器缓存

    CDN 是互联网上内容分发的重要一环.无论您之前是否了解过 CDN,其实它已经在您的日常生活中发挥作用了.比如您正在淘宝挑选心仪的商品,或者在观看一段令人捧腹的视频,以及您正在阅读的这篇文章,这些资源 ...

  7. python 之 函数 基础2

    5.36 命名关键字 什么是命名关键字参数? 格式:在*后面参数都是命名关键字参数 特点: 1 必须被传值 2 约束函数的调用者必须按照key=value的形式传值 3 约束函数的调用者必须用我们指定 ...

  8. IdentityServer4 学习笔记[1]-客户端授权

    前言 本文内容来自IdentityServer4官网,官网有详细的介绍,并且有源码Demo 官网源码例子传送门 建立授权服务端 我们暂时不配置Https,选择空模板建立项目,项目建立后, 为了查看de ...

  9. jdk的卸载

    问题描述: win10环境安装了jdk1.7&jdk1.8&jdk1.9 jdk1.9安装后,设置jdk1.9安装目录为JAVA_HOME.后来JAVA_HOME切换jdk1.8环境变 ...

  10. thinkphp5使用第三方没有使用命名空间的类库

    特别注意的是,如果你需要调用PHP内置的类库,或者第三方没有使用命名空间的类库,记得在实例化类库的时候加上 \ // 错误的用法 $class = new stdClass(); $xml = new ...