Работая над своим сайтом, столкнулся с неожиданной проблемой: браузер реализовывает анимацию перемещения блока неоднородно, рывками. Chrome, например, дает задержку, после чего практически мгновенно перемещает блок в нужную позицию. Остальные браузеры перемещают текст так, что идет рябь и смотреть на экран невозможно.
Есть ли какие-то советы по оптимизации исходного кода, возможно более тонкая настройка jQuery? Возможно, следует отказаться от фреймворка, если он «тормозит» работу?
Как вариант попробуйте все блоки разбить и перед началом анимации добавлять в начало (конец) текущего блока следующий, после анимации удаляйте текущий. Может из-за того что блок очень длинный анимация дергается.
Таки да, оставил 5 проектов и анимация заработала куда плавнее. Думаю, надо добавить AJAX и подгружать проекты динамически. И анимация будет лучше, и нагрузка на первую загрузку уменьшится.
Не, Вы можете без аякса обойтись, просто все остальные блоки отложить в другое место и «подлаживать» после текущего перед анимацией, это избавит от задержек перед анимацией для подгрузки нового блока + надо будет ждать пока картинки подгрузятся.
Боюсь, что даже так останется основная проблема: браузер не будет рендерить картинку до того, как она появится в области видимости. Например, в Хроме анимация хоть и стала плавнее, но все равно есть ощутимый рывок. В Сафари ситуация еще хуже. Открыл вчера сайт в ИЕ7, расстроился и решил поменять концепцию: от такой анимации руки опускаются исправлять что-либо. Остался чисто теоретический интерес исправить анимацию в нормальных браузерах вроде Хрома и Сафари.
Объект позиционирован относительно, изменяется только параметр marginLeft. Внутри блока картинка, два заголовка и два абзаца текста. В ФФ более-менее плавно, в Хроме движение не равномерно: сначала блок не изменяется, а в конце резко перемещается, рывком.
Кстати, есть тормоза из-за подгрузки картинок. Если слайд появляется первый раз, то происходит небольшой рывок. После загрузки анимация становится плавнее.
Плюс, тормоза могут быть из-за большого размера блока со всеми слайдами. Не было бы логичней делать карусель из одного слайда, а следующий или предыдущий добавлять динамически, только когда необходима анимация?
Похоже, браузер заранее не отрисовывает картинку, если она находится вне зоны видимости пользователя. Также тормозов добавляет ресайз картинки.
Кстати, было бы логично сделать скроллинг колесиком мышки.
Единственное что есть из того что нерадует глаз, это что когда гармошка раскрылась полностью происходит небольшой ресайз дополнительный. В остальном всё кул.
Если я вас правильно понял, проблема в том, что я, например, двигаю блок на короткое расстояние на протяжении большого времени. Верно? Чтобы избежать ряби следует ускорить анимацию?
Оу, вовсе вылетело из головы… был ещё такой трюк, очень похоже на ваше описание…
Попробуйте указать блоку ширину (width: 100% или width: 200px, точно не помню можно ли ставить %), должно помочь. Сам долго мучался с такими «рывками».
Какому блоку? У меня один блок-обертка и внутри него блок-лента, который я двигаю. Ширина блока-обертки указана, равно как и ширина блока-ленты.
Тормоза начинаются, когда браузер начинает рендерить картинку: вытаскивает ее пикселей на 30, задумывается, и потом быстренько «дотаскивает» до нужной позиции.
В оригинале все картинки 1054px по ширине и разной высоты. Javascript'ом изменяю высоту так, чтобы изображение не вылезало за область видимости. Если оно слишком широкое, дополнительно уменьшаю его.
Может в этом и есть проблема, попробуйте сделать превьюшки маленького размера… Т.к. предложим у браузера FPS ~30 (30 рендеров в секунду) и каждый рендер нужно масштабировать картинки размером 1054px до 20px…
Ну не до 20px, конечно, но раза в два ужимать может. Конечно, превьюшки сделать не получится: разрешения экрана у всех разные, угадать точную высоту и заранее сделать превьюшку под нее не выйдет.
В своё время для оптимизации анимаций использовал следующий костыль: если браузер поддерживает CSS3 анимацию, то используются она, если нет, то обычная. Если погуглить, то можно найти плагин, модифицирующий jQuery animate, добавляя CSS3.
