Jquery оптимизация анимации

Тема в разделе "JavaScript", создана пользователем Baracuda, 24 сен 2011.

Модераторы: ZiX
  1. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Все чаще и чаще сталкиваюсь с тем, что в каждом проекте требуется всё больше и больше анимации. Все скрипты всегда пишу сам, не пользуюсь стандартными каруселями или решениями.

    По примеру недавнего проекта, задача по скриптам была следующая:
    1. В шапке сайта скрытая панель, по клику на определенный элемент выезжает.
    2. В шапке находится логотип по наведению на него он уходит частично в fadeOut и появляется другой fadeIn.
    3. В шапке находится поиск по клику на него он выезжает влево (расширяется), причем стоящий перед поиском элемент при этом должен уходить в FadeOut.
    4. В контент области 5 картинок 1600х768 в бекграунде. Каждые 15 секунд меняется с эффектом fadeIn fadeOut .
    5. В контент области есть текст ротатор, с Контроллами влево-вправо, но текст меняется каждый раз после смены фонового изображения.

    Вот такой вот список анимаций используется на одной странице. Мне не очень нравится, т.к. бывают торможения анимации, хочется что бы всё работало как часики. Есть ли какие-то методы по оптимизации работы скриптов для улучшения быстродействия? Какие-то специфические приемы верстки? Я где-то читал, что скорость работы скрипта иногда зависит от самой верстки, какие именно критерии влияют на это?
     
  2. konishoa

    konishoa Постоялец

    Регистр.:
    22 сен 2010
    Сообщения:
    126
    Симпатии:
    36
    Читай внимательно
    http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
    п.11
    Короче говоря, используй animate() вместо методов fadeIn fadeOut.
    Не забывай загружать jquery.min.js - сжатую версию вместо обычной (эт я думаю, ты и так знаешь).
     
    Baracuda нравится это.
  3. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Спасибо, но проблема не решилась. Причем использую кеширование по полной, минимизоровано всё что можно. У меня есть вопрос по теме.

    У меня примерно такая структура для фоновых больших картинок:
    HTML:
    
    <div id="sliderBg">
         <img src="" alt="" />
         <img src="" alt="" />
         <img src="" alt="" />
    </div>
    
    Размер картинки 1600х768, спозиционирован и блок и картинки абсолютно, скрипт переключает в заданный интервал времени картинку с эффектом fade. Вопрос заключается в следующем. Скрипту не тяжко работать с большими изображениями? Просто я пробовал изменить структуру. Скриптом выдерал адреса изображений, удалял их и вставлял вместо них блоки <div> с заданными бекгранудами согласно вырванному адресу изображения, работало лучше, но решение не ахти. А без выдерания адреса - не вариант, т.к заказчик врятли захочет каждый раз лезть в css и прописывать беграунд