关于AJAX请求时 加入 进度条

1、引入要显示的GIF图片

<img id="img" class="active" style="display:none" alt="" src="xxxxx/loading.gif"/>

这里class 选择了本地样式，若想自己编写样式，可用css自己编写。

2、获取这个GIF对象

<script type="text/javascript">
    var img = $("#img"); 

</script>

3、发送请求前显示图片，完成请求后，隐藏图片

<script type="text/javascript">

var img = $("#img"); 
		$.ajax({
			type : "post",
			url : "XXXXX",
			data : data,
			dataType : "json",
			//显示图片
			beforeSend:function(){ 
				img.show().css({ 
				"position": "fixed", 
				"top": "40%", 
				"left": "45%", 
				}); 
			}, 
			//隐藏图片
				complete:function(){ 
				img.hide(); 

			} ,
			success : function(data) {
				
				//此处为ajax至此那个成功后
			},
			
 
		});
	</script>

转载于:https://blog.51cto.com/252254769/1725291