[原创] 为页面中的请求加载进度条

ajax loading

2016-11-22 1172

在页面中做ajax请求的时候,为了更好的用户体验最好做一个加载效果在页面上。在传统模式下,为了实现页面加载的loading效果,可以自己写一个样式在ajax请求发送的时候做配置。如果使用的是jQuery插件,可以在代码中做全局配置


$.ajaxSetup({
	timeout:5000,//设置超时时间5秒
	dataType: ''json,
	beforeSend:function(){
		//加载之前,添加loading效果
	},
	complete:function(res){
		//请求完成 移除loading效果
		console.dir(res)
	},
	error:function(err){
		console.log(err)
	}
})

以上方法需要自行实现一下loading效果,可以自己对加载效果做控制。

今天偶然发现一个不错的插件,只需引入即可自动在做请求的时候加载loading效果。

插件地址:pace

插件使用方法很简单,直接引入即可。

插件使用bower安装即可


# bower安装依赖文件
bower install pace
bower install jquery#2.1.2
主要的html代码文件如下:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,miximum-scale=1.0, user-scalable=0">
        <title>pace-demo</title>
        <link rel="stylesheet" href="./bower_components/PACE/themes/blue/pace-theme-center-atom.css">
    </head>
    <body>
        <ul id="list"></ul>
        <script src="./bower_components/PACE/pace.min.js"></script>
        <script src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script>
        //获取服务器端数据
        $.getJSON('http://lixuanqi.com/api/v1/address/get_data.json',res=>{
            console.dir(res.data)
            var strHtml = ''
            //遍历数据 拼接字符串结果
            res.data.forEach(item=>{
                strHtml+=`<li>${item.name}</li>`
            })
            $('#list').html(strHtml)
        })
        </script>
    </body>
</html>