由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法;

代码如下:

/*ajax提交的延时等待效果*/

var AjaxLoding = new Object();

//wraperid : 显示loding图片的容器元素
//ms:表示loding图标显示的时长,毫秒
//envent:表示出发事件的事件源对象,用于获得出发事件的对象
//callback:表示动画结束后执行的回掉方法
//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作
AjaxLoding.load = function(lodingid,ms,event,left,top,callback){ if (!left || typeof left == undefined)
left = 0;
if (!top || typeof top == undefined)
top = 0; this.lodingid = lodingid; //显示loding图标的parent元素
this.obj = $("#" + this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
      this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
//默认将图标居中与lodingid显示,设置如下样式
var imgobj = $("<img src='/images/loaderc.gif' style='position:absolute; width:32px; height:32px;' id='img_loding'/>");
imgobj.css({ left: this.obj.width() / 2-imgobj.width()/2-left, top: this.obj.height() / 2-imgobj.height()/2-top });
imgobj.appendTo(this.obj);
this.obj.animate({height:this.obj.height()}, ms, function () {
callback();
});
};
this.stop = function () {
$("#img_loding").remove();
this.sourceEventElement.attr("disabled", false);
}
};

调用方法:

        $("#elementid").click(function (e) {
var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
//alert("提交成功!");
obj.stop();//隐藏加载图标
});
obj.start();
});

 我用的loding图标,大家可以自行替换;

实现很简单,没有考虑什么性能、标准什么的;还有很多不完善,有更好的欢迎交流;

javascript 通用loading动画效果的更多相关文章

  1. 实现loading动画效果

    下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...

  2. ios开发之简单实现loading动画效果

    最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...

  3. Atitit Loading 动画效果

    Atitit Loading 动画效果 使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...

  4. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. loading动画效果记录

    看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...

  6. android动画介绍--Animation 实现loading动画效果

    Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...

  7. CSS3效果:animate实现点点点loading动画效果(二)

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

  8. CSS3效果:animate实现点点点loading动画效果(一)

    实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...

  9. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

随机推荐

  1. VIM 分割窗口

    VIM 分割窗口     *08.1*  分割窗口 打开新窗口最简单的命令如下: :split 这个命令把屏幕分解成两个窗口并把光标置于上面的窗口中: +----------------------- ...

  2. 【转】Android开发之Bitmap的内存优化详解

    本文来源:转载自: http://mobile.51cto.com/abased-410796.htm 在Android应用里,最耗费内存的就是图片资源.而且在Android系统中,读取位图Bitma ...

  3. 学习opencv中文版教程——第二章

    学习opencv中文版教程——第二章 所有案例,跑起来~~~然而并没有都跑起来...我只把我能跑的都尽量跑了,毕竟看书还是很生硬,能运行能出结果,才比较好. 越着急,心越慌,越是着急,越要慢,越是陌生 ...

  4. [设计模式]观察者模式1(用JDK提供的API)

    观察者模式: 被观察的类: package cn.itcast.obserdemo; import java.util.Observable; //House是被观察的,这里直接继承java中的类库( ...

  5. 基于Selenium2+Java的UI自动化(3) - 页面元素定位

    一.几种网页定位方式 webdriver的页面定位很灵活,提供了8种定位方式: 其中,常见的有三种:id .cssSelector .xpath: 一个元素如果存在 id 属性,则这个 id 的值,在 ...

  6. linux基于file的logger

    我们可能会遇到这样的问题:即写出的代码可能需要编译成动态连接库并在不同运行环境下运行,而这些运行环境下log的输出方式可能不同,一种运行环境的log方式在另一种运行环境下可能无法输出.而为保证多种运行 ...

  7. .Net 把网页Html转PDF文件

    .Net 把网页Html转PDF文件 此篇主要利用 wkhtmltopdf  进行转换. 一.控制台直接转换 首先到官网http://wkhtmltopdf.org/下载wkhtmltopdf  ,下 ...

  8. Memcached 工作原理

    http://hzp.iteye.com/blog/1872664 Memcached处理的原子是每一个(key,value)对(以下简称kv对),key会通过一个hash算法转化成hash-key, ...

  9. procedure的over(partition by ) function

    转载自:http://www.2cto.com/database/201310/249722.html oracle的分析函数over(Partition by...)   Sql代码       o ...

  10. 《JAVA核心技术卷 卷1 基础知识》

    第一卷 关键字:体系结构中立,可移植性,高性能,多线程 体系机构中立:通过解释字节码实现,优点是,让JAVA能在很多机器上运行.缺点是运行速度很慢. 可移植性:因为JAVA的基本数据类型有固定的大小. ...