通过$.ajax设置预加载动画加强用户体验

来源：互联网发布：qq飞车黄金守护神数据编辑：程序博客网时间：2024/06/06 22:09

有些时候网站加载js获得的数据会非常慢，于是就想能不能请求数据中间，给加载数据一个提示，增加用户体验。详细阅读了$.ajax的用法，觉得这个很合适，于是记录下来，以供参考：

$.ajax({            url:url,            type:'get',            dataType: "json",            beforeSend: function () {                $("body").append('<div id="pload" style="position:fixed;top:30%;z-index:1200;background:url(/wap/images/loading.gif) top center no-repeat;width:100%;height:140px;margin:auto auto;"></div>');            },            complete: function () {                $("#pload").remove();            },            success:function(result){            }

上面使用beforeSend方法开始发送数据时在页面正中显示加载动画。当请求结束时使用complete方法结束加载提示

效果如下:

0 0