Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Подтормаживает jQuery.animate


Автор: sarssokol 23.12.2009, 22:27
Здравствуйте!
Прошу помочь с проблемой... На сайте анимируется 3 объекта одновременно, один из них достаточно большой (внутри него достаточно много элементов...) анимируется только left или top элементов...
Если комп немного слабоват, анимация жутко тормозит, оставляя только 2-4 кадра...
Что делать, не знаю... Если нужно, выложу ссылочку на сайтик..
Заранее благодарен

Автор: IDVsbruck 24.12.2009, 11:58
Ссылочку на сайтик не надо, а вот краткий код можно выложить ...

Автор: sarssokol 24.12.2009, 13:22
Код

  /**
   * Сдвиг по вертикали
   */
  function vertMove() {
    // Если сдвигать по вертикали не надо - не сдвигаем
    if (pageMarginTop != activeMT) {
      $mCont.animate({top: pageMarginTop}, timeVert, "swing", function(){
        animMovedPageCallback();
      })
    } else animMovedPageCallback();   
  }

  /* выставляем новую высоту контейнера по новой странице */   
  $movedOH.animate({height: $page.outerHeight()}, timeHor+timeVert, "swing", function(){
    (mPageCbDone) ? $(this).height("auto") : false;
  });
  //$movedOH.height($page.outerHeight());

  /* анимируем селектор меню */
  $(".top-menu .menu-select").animate({left : selectorLeft}, timeHor+timeVert, "swing", function() {
      $activeItem.removeClass("active").children(".text-links").removeClass("active-link");
      $newItem.addClass("active").children(".text-links." + newSelector).addClass("active-link");
  });
  
  // Тем временем анимируем саму страницу
  // Если по вертикали сдвигать не нужно или сдвигать нужно вниз
  if (pageMarginTop <= activeMT) {
    if (pageMarginLeft != activeML) {
      $mCont.animate({left: pageMarginLeft}, timeHor, "swing", function() { 
        vertMove();
      });
    } else vertMove();
  } else if (pageMarginTop > activeMT) {
    $mCont.animate({top: pageMarginTop}, timeVert, "swing", function() { 
      $(this).animate({left: pageMarginLeft}, timeHor, "swing", animMovedPageCallback)
    });                  
  }

Автор: IDVsbruck 24.12.2009, 15:46
Не знаю приведенных времен и сдвигов, а также содержимого контейнеров, но можно попробовать дать пару рекомендаций:
1. пересмотреть свои анимации - точно нужны ли и все ли нужны?
2. возможно, имеет смысл сделать очередь анимаций, а не все сразу (а вдруг?)
3. максимально отказаться от эффектов easing - они очень притормаживают процесс анимации (пожалуй, сильнее всех других факторов)
4. возможно, попытаться минимизировать содержимое контейнеров при анимации (к примеру - сначала затемнение каких-то элементов в контейнере, затем сокрытие его (display:none), потом анимация, показ и плавное отображение)
5. передавать в функцию анимации только статические переменные: в твоем случае - вычисление смещений, селекторы вычислять до анимации и передавать только как jQuery-объект и т.д. - это несильно, но все же уменьшит время вычислений (а в случае вычисляемых значений, к примеру, для смещения, может и значительно)
6. попробовать создать при загрузке анализатор вычислительных способностей компа клиента с тем, чтобы в зависимости от этого параметра влиять на эффективность анимации - от полного отказа до полной анимации.

Ну и все же дай ссылку - посмотреть на содержимое контейнеров - авось что-то натолкнет на более кардинальное решение проблемы.

Автор: sarssokol 24.12.2009, 17:17
Спасибо большое... на некоторые мысли навели..., попробую.
http://webakula.com

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)