jquery中的ajax 添加 loading... 提示

原文地址：

http://www.5ixiudou.com/portal/detailInfo/1000000005/221

在jquery中，使用 ajax 时，加载数据比较慢，造成页面长时间木有变化，尤其是开始的空页面刚开始加载数据时，很容易让人不舒服，以为页面死掉了。这时，为了提高页面体验，可以加入一些等待的元素，比如 “信息正在加载，请稍后...”这样的提示；或者一些加载/等待的图片，像这样的。这样，人们就可以知道，啊，这个页面是在加载东西啊。

       当然，现在有很多插件，都是自带这个东西的，这里呢，咱们自己手写一个，方便，而且，样式啥的方便控制。下面就上代码了啊。

$.ajax({

        type : "POST",

        url : basePath+'/portal/ajax/findPublishInfoBySelfPage',

        data:{

            //你自己的请求参数

        },

        beforeSend:function (){  //在加载数据之前，要添加 正在加载的dom

            var height = $(window).height();

            var width = $(window).width();

            var htmlValue = '<div class="loading_masker" style="height:'+height+'px;width:'+width+'px;position:fixed;top:0px;left:0px;text-align:center;verticle-align:middle;"><img style="margin-top:400px;" src="loading-1.gif"/><div>';

            $("html").append(htmlValue);

        },

        complete:function (){  //在数据加载完成之后，要删除掉 正在加载的dom

            $(".loading_masker").remove();

        },

        dataType : 'json',

        success : function(data) {

            //加载你自己的数据

        }

    });

说明：

         1. loading-1.gif 替换成自己的图片路径就可以了，我是使用的这张图片。

                                                        

         2. 如果不清楚参数是什么样子，可以下载一个api看下子，挺全的。

              http://www.5ixiudou.com/portal/detailInfo/1000000005/194