模态框缓冲效果实现

项目模态框是通过ajax异步来获得数据的，这就造成一个问题，当请求过多或数据量太大，数据展现的不是很及时，用户体验不是很好。于是想到通过缓冲效果来增强用户体验。

步骤：

1. jquery的ajaxStart(callback) 方法 及ajaxStop(callback)
   通过这两个方法判断ajax异步请求是否结束。
2. 通过Spin.js 实现缓冲效果。

简介：

ajaxStart(callback) AJAX 请求开始时执行方法。

示例
         $("#loading").ajaxStart(function(){
           $(this).show();
         });

     ajaxStop AJAX 请求结束时执行方法。
        ```
示例
          $("#loading").ajaxStop(function(){
           $(this).hide();
         });

     注：在jquery1.8以上 执行上面方法需要加 $(document) 即：

$(document).ajaxStart(function(){...};

     spin.js
     http://www.cnblogs.com/lxblog/p/3425599.html

过程：

导入js

<script src="statics/js/jquery-2.1.4.min.js" type="text/javascript" ></script> 
<script src="statics/js/spin.js" type="text/javascript" ></script>

    <script type="text/javascript">
            //定义花瓣样式
            var opts = {
            lines: 13, // 花瓣数目
            length: 15, // 花瓣长度
            width: 10, // 花瓣宽度
            radius: 20, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: '#5882FA', // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: true, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转
            className: 'spinner', // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: '50%', // spinner 相对父容器Top定位 单位 px
            left: '50%'// spinner 相对父容器Left定位 单位 px
        };

        var spinner = new Spinner(opts);

        //当点击模态框时执行的方法。
        function  showFlower(){
             //                ajax开始执行
                $(document).ajaxStart(function(){
                    var target = $("#panel-body").get(0); //panel-body为我右侧页面div的id.我的页面布局为左侧菜单栏右侧主体内容。
                    spinner.spin(target);//打开缓冲效果
                });
             //                ajax结束执行
                $(document).ajaxStop(function(){
                    spinner.spin(); //隐藏缓冲效果
                });
                .
                .
                .
                其他方法体
        }
        </script>

如果您有更好的方法也欢迎提出来