一款基于jQuery Ajax的等待效果

特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/

1、效果示例

1、加载中效果

2、加载后效果

2、代码样例

var ajaxUtil = {
            /**为保证load图标不会一闪而过，小于600毫秒的请求将延时加载*/
            loadShowTime:600,
            /**
             * Ajax请求
             * @param {Object} url 请求的url
             * @param {Object} params 参数（json类型，如：{userName:'admin', email:'mao2080@sina.com'}）
             * @param {Object} successCallBack 自定义函数-成功时返回
             * @param {Object} errorCallBack 自定义函数-失败时返回
             * @param {Object} args 其他参数{"loadingId":null}
             */
            ajaxRequest : function(url, params, successCallBack, errorCallBack, args){
                args = ajaxUtil.showLoading(args);
                $.ajax({
                    url:url,
                    data:params,
                    type:"get",
                    dataType:"json",
                    async:true,
                    success:function(res){
                        if(res.success || res.code == 200){
                            args.timestamp = new Date().getTime()-args.timestamp;
                            if(args.timestamp || args.timestamp > ajaxUtil.loadShowTime){
                                window.setTimeout(function(){
                                    ajaxUtil.hideLoading(args);
                                    successCallBack(res);
                                }, ajaxUtil.loadShowTime-args.timestamp);
                            }else{
                                ajaxUtil.hideLoading(args);
                                successCallBack(res);
                            }
                        }else{
                            ajaxUtil.hideLoading(args, true);
                            if(errorCallBack){
                                errorCallBack(res);
                            }
                        }
                    },
                    error:function(res){
                        ajaxUtil.hideLoading(args);
                        alert("请求失败...");
                    },
                });
            },
            /**
             * 显示加载loading
             * @param {Object} args
             */
            showLoading:function(args){
                args = !args?{}:args;
                args.timestamp = new Date().getTime();
                if(args.loadingId){
                    var container = $(args.loadingId);
                    if(container){
                        container.css({"position":"relative"});
                        container.append('<div class="loading" style="60px; height:24px; position:absolute;left:50%;top:50%;margin-left:-30px;margin-top:-12px;"><img src="img/loading-0.gif"/></div>');
                    }
                }
                return args;
            },
            /**
             * 隐藏加载loading
             * @param {Object} args
             */
            hideLoading:function(args){
                if(args.loadingId){
                    var container = $(args.loadingId);
                    if(container){
                        container.find('.loading').remove();
                    }
                }
            }
        }
        
        $(function(){
            ajaxUtil.ajaxRequest("data.json", null, function(res){
                //处理请求成功
                $("#userName").html(res.data.userName);
                $("#email").html(res.data.email);
            }, function(res){
                //处理请求失败
            }, {loadingId:"#test1"})
        });

3、资料下载

load-demo.rar