Question

jquery如何加一个loading图片？

请问下面代码如何加一个loading图片<img src="images/loading.gif">，结果没返回之前显示一个loading图片，返回成功就显示结果。
function submit_ok () {
$.post("action.php",{type:'test'},
function(data){
$('#test').html(data);
},
"text");
}

Answer 1

jquery中需要一张载入的图片，比如loading.gif表示正在加载。
触发载入时，使用点击某个按钮。

html片段
<!--促发按钮-->
<input type="button" id="need-load" value="载入">

<!--遮罩背景层-->
<div id="load-layout" style="position:fixed;width:100%;height:100%;top:0px;left:0px;opacity:0.4;background:#000;display:none;">
<!--放置载入图片层，让载入图片放在大致中心就可以，需要绝对中心的话可以在js中做微调，这里忽略-->

<div style="position:absolute;left:49%;top:200px;width:图片宽度px;height:图片高度px;">
<img src="load.gif">

</div>
</div>
jq代码
$(function(){
$('#need-load').click(function(){
var _this = $(this);//存储触发元素，以备后面调用

$(this).attr('disabled',true);//禁用按钮

$('#load-layout').show();
//需要对图片位置进行调整可以放这里，这里忽略

$.ajax({
url : '目标地址'
。。。//ajax相关的参数，忽略

success:function(res){//成功后撤销载入
//这个可以加入的一些撤销判定，这里忽略
//载入后的一些操作，比如某一块显示结果html，这里忽略

$('load-layout').hide();//隐藏载入层

_this.attr('disabled',false);//撤销按钮禁用
},

error:function(){
//这里可以做一些错误的提示
$('load-layout').hide();//隐藏载入层

_this.attr('disabled',false);//撤销按钮禁用
}

});
});
});

Answer 2

你去是用这种写法，
$.ajax({
url:'',
type:'POST',
beforeSend :function(){}
}).done(function(){
//....
})

在before里写添加的，在done里写删除的，你可以在写一个always(function(){})

追问

代码都不是这样写的，所以不能为了loading功能去修改代码

追答

晕啊，没区别啊 ，都是jquery的 只不过你的是简化写法 ，我的是完整写法，有甚么区别呢

追问

汗，这个不懂唉，只会简化的，复杂的看不懂了。

追答

道理是一样的。同样的逻辑，在beforesend的时候你把loading加到你的页面中，在成功之后在把loading去掉就可以了，怎么写无所谓的

Answer 3

function submit_ok () {
$("#loading").show();
$.post("action.php",{type:'test'},
function(data){
$("#loading").hide();
$('#test').html(data);
},
"text");

}
<img src="images/loading.gif" id="loading" style="display:none;">