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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue 动态绑定背景图片的方法
Aug 10 Javascript
JavaScript实现点击切换功能
Jan 27 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP date函数参数详解
2006/11/27 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
在vue中使用Base64转码的案例
2020/08/07 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python删除列表中重复记录的方法
2015/04/28 Python
初步讲解Python中的元组概念
2015/05/21 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
说一说Python logging
2016/04/15 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
大学校运会广播稿
2014/02/03 职场文书
社会实践评语
2014/04/28 职场文书
工地标语大全
2014/06/18 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL