javascript 通用loading动画效果实例代码


Posted in Javascript onJanuary 14, 2014

由于项目中多处要给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();
        });

javascript 通用loading动画效果实例代码我用的loding图标,大家可以自行替换;

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

Javascript 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
jquery操作cookie插件分享
Jan 14 #Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 #Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 #Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 #Javascript
js中opener与parent的区别详细解析
Jan 14 #Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 #Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP编程风格规范分享
2014/01/15 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
Python基于贪心算法解决背包问题示例
2017/11/27 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python实现俄罗斯方块
2018/06/26 Python
python 实现return返回多个值
2019/11/19 Python
pyspark 随机森林的实现
2020/04/24 Python
金融学专科生自我鉴定
2014/02/21 职场文书
感恩节活动策划方案
2014/05/16 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
欢迎领导检查标语
2014/06/27 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
安全伴我行主题班会
2015/08/13 职场文书
python如何进行基准测试
2021/04/26 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏