ajax刷新加载loading效果

  |   ajax

我们平时玩手机,可以看到移动网站或者app中的常见loading加载图片,这样就可以提高用户的体验性。注重用户体验为第一,大家都知道这一点吧。如果想了解loading加载的资料,网上或者书籍等方面获取一些关于有用的资料。我做项目时就用这个loading加载的效果,ajax返回之前会出现加载中或者loading图标等,用来请求数据的时候也可以用beforeSend的方法。


操作:

1. 先找loading图片的,最好是gif文件
2. 我发现有一个好的东西要分享一下有关loading的图标网站
3. 如果对这个loading图标感有兴趣,就可以去访问loading的图标网站:http://loading.io/
4. 用ajax里面有beforeSend的方法用于请求服务器发送请求之前增加一些处理函数

相关代码:

  $.ajax({
        url: "",
        type: 'GET',
        dataType: 'jsonp', 
//请求数据之前
        beforeSend: function () {
          $("#goods_list").html('<div id="loading"><p><img src="./images/default.gif"></p><p>正在加载中...</p></div>');
        },
        success:function(data) {
//加载完毕的数据内容
    }
}

加载效果图: