показать значок загрузки в div с jquery

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 и имеет функцию успеха и сбоя.

Что я хочу сделать, так это то, что после нажатия кнопки скрыть содержимое div mainHolder и заменить его вращающимся изображением, чтобы показать пользователю, что происходит обработка. А затем, когда он будет завершен, будь то успех или неудача, отобразите текущее содержимое div mainHolder.

Кто-нибудь поможет мне реализовать это? Возможно, мне нужна общая функция, которую я мог бы использовать повторно с другими элементами div и сценариями.

Спасибо.

Answer 1

Создайте два дополнительных элемента div внутри основного держателя и присвойте ему идентификатор содержимого.а другой div id id spinner: (стиль с CSS при необходимости, а также скрытый)

Затем поместите код ниже в JS-файл под функцию dom ready.

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

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

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

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

})