javascript 通用loading动画效果
由于项目中多处要给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动画效果的更多相关文章
- 实现loading动画效果
下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...
- ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
- Atitit Loading 动画效果
Atitit Loading 动画效果 使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- loading动画效果记录
看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...
- android动画介绍--Animation 实现loading动画效果
Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...
- CSS3效果:animate实现点点点loading动画效果(二)
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...
- CSS3效果:animate实现点点点loading动画效果(一)
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...
- css3实现的3中loading动画效果
一.css3中animation动画各种属性详解: animation Value: [<animation-name> || <animation-duration> ...
随机推荐
- qt-vs-addin-版本支持
qt-vs-addin-1.2.0-opensource.exe VS200X qt-vs-addin-1.2.1-opensource.exe VS200X qt-v ...
- 检测 NSObject 对象持有的强指针
在上一篇文章中介绍了 FBRetainCycleDetector 的基本工作原理,这一篇文章中我们开始分析它是如何从每一个对象中获得它持有的强指针的. 如果没有看第一篇文章这里还是最好看一下,了解一下 ...
- WebService地址变成计算机名的解决办法
WCF 4.0 has solved this issue in some instances with a new config option that use Request Headers: & ...
- CSS选择器优先级
1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序 例如: .a{ color:red } .b{ color:green } 由于b晚于a定义,所以b覆盖a,反 ...
- hadoop安装包的目录结构
初次接触Hadoop,了解了Hadoop安装包的目录结构,和大家分享下: bin:Hadoop最基本的管理脚本和使用脚本的目录,这些脚本是sbin目录下管理脚本的基础实现,用户可以直接使用这些脚本管理 ...
- HuffmanTree && HuffmanCode
如何构造HuffmanTree? Huffman算法: (1)根据给定的n个权值{w1, w2, ...,wn}构成n棵二叉树集合
- latch和DFF的区别和联系
1.latch的缺点 ①没有时钟端,不受系统同步时钟的控制,无法实现同步操作:和当前我们尽可能采用时序电路的设计思路不符. ②对输入电平敏感,受布线延迟影响较大,很难保证输出没有毛刺产生: ③latc ...
- ttt
<style> .head1{ background:rgb(51,51,51); height:49px; min-width:1241px; width:100%; z-index:1 ...
- c#通过Dotpeek调试dll
我想编程的兄弟们都要引用别人代码,哪怕是.framework里面的基础类库,也经常引用别人的一些dll,但是别人内部抛出一些异常的时候,又不知道到底怎么回事,如果这时候可以在别人的代码里面调试该多好呀 ...
- hadoop命令报错:权限问题
root用户执行hadoop命令报错: [root@vmocdp125 conf]# hadoop fs -ls /user/ [INFO] 17:50:42 main [RetryInvocatio ...