用jquery显示div中的加载图标

Question

我有一个像这样的div标签

<div id="mainHolder">

<span>asjlkdasjdka</span>
<img src='image.jpg' />
<input type="button" id="myButton" value="Click me" onclick="callWcf();" />

</div>

我正在使用jquery进行客户端开发,单击div中的按钮将进行一些服务器端处理.

我有callWcf函数进行wcf调用并具有成功和失败功能.

我想要做的是,一旦点击按钮,隐藏mainHolder div的内容并将其替换为旋转图像,以向用户显示正在处理的事件.然后当它完成时,无论成功还是失败,重新显示div mainHolder的当前内容.

有人帮我实现这个吗？我想要一个通用功能,也许我可以重用其他div和场景.

谢谢.

Answer 1

在主持有者中创建两个额外的div并给它一个内容id.另一个div是微调器的id :(根据需要和隐藏的css样式)

然后将代码放在dom ready函数下的JS文件中.

$("#content").bind("ajaxStart", function(){

   // Show Spinner
   $('#content').hide();
   $('#spinner').show();

}).bind("ajaxComplete", function(){

   // Hide Spinner
   $('#content').show();
   $('#spinner').hide();

})