Прикрепите скрипт к DIV при выполнении запроса AJAX

Question

У меня есть этот скрипт

<div id="div2">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>

<script>
function rotate() {
    var count = 0;
    var elem = document.getElementById('div2');
    elem.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 10);
  }
</script>

, который в сочетании с CSS создает анимацию загрузки в стиле iOS. Я не писал сценарий. Если вы хотели бы видеть это, ссылка здесь:

http://kilianvalkhof.com/uploads/spinners/

но мой вопрос в том, что я выполняю запрос AJAX jQuery и внедряю запрашиваемую страницу в DIV. Я пытаюсь отобразить эту анимацию в том же DIV, в который загружаю страницу, пока страница запрашивается. Элементы стилизованы, но это не должно иметь значения для этого. Мне просто нужно приложить это. Может ли кто-нибудь помочь мне с этим?

Answer 1

Вы должны быть в состоянии сделать что-то простое, как это: http://www.jsfiddle.net/yijiang/ESnRS/3/

Основная концепция состоит в том, чтобы заставить спиннер появляться при каждом вызове ajax, а затем удалять его, когда запрос завершен. Базовая структура будет выглядеть примерно так:

$('#btn').click(function(){ // Trigger - this can be anything really
    var t = setTimeout(spinFunc, 100); // Let the spinner spin continously
    $('#spinner').fadeIn(); // Spinner appear

    $.ajax({
        success: function(){
            $('#spinner').fadeOut(300, function(){ // Spinner disappear
                clearTimeout(t); // Stopping the animation with it
            }); 
        }
    });
});

Answer 2

<div id="div2">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>
<script type="text/javascript">
var timer;
function rotate() {
    var count = 0;
    var elem = document.getElementById('div2');
    elem.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.clearTimeout(timer);
    timer = window.setTimeout(rotate, 10);
  }
</script>