<div id="loadbutton">
<button>click</button>
</div>
<div id="picload" style="display:none;">
<img src="img/loading-blue.gif" alt="wait" />
</div>
<div id="loadover" style="display:none;">加载完成</div>
<script>
$(document).bind({
"ajaxStart" : function () {
$("#picload").css({
"display" : "block"
});
$("#loadover").css({
"display" : "none"
});
},
"ajaxStop" : function () {
$("#picload").css({
"display" : "none"
});
$("#loadover").css({
"display" : "block"
});
}
});
$("button").bind("click", function (){
$.ajax({
url:"http://localhost:8080/xxx",
async:true,
dataType:"json",
success:function(data){
console.log(data);
}
});
});
</script>
点击click。等待图片显示,加载完毕后图片隐藏
需要通过异步的方式
ajax开始时触发ajaxstart,ajax请求结束触发ajaxstop