模态框缓冲效果实现

项目模态框是通过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>

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