Тормозит gif анимация в браузерах
Здравствуйте!
почему гифник крутится гораздо медленней чем должен крутится на самом деле??
код такой:
т.е. при наведении курсора начинает крутится gif, но медленно и с рывками
в чем причина такого нерадивого поведения?
ЗЫ: сами мы не местные, с html-ом впервые работаем
вобщем дело такое - в ACDSee скорость показа gif-файла раза в 3 быстрее (как и задумывалось), а на страничке медленно . рывки - это я так выразился неудачно - заметно смену кадров, что нежелательно.
Добавлено 13.05.05, 08:50
может с гифником непорядок. сделал на Ulead Gif Animator 2.0
ну вообщето gif работает прекрасно .
я тут вот постану и посмотри ее на всех браузерах //она работает бытро . 4 работают правильно
погляди нормально по моему работает .
а на страничке медленно . рывки - это я так выразился неудачно - заметно смену кадров, что нежелательно.
ммм. я все тоже наблюдаю и у себя, вот только хотелось чтобы быстрее он проигрывался.. сл-но надо либо уменьшать время между сменой кадров, либо уменьшать колличество кадров в гифе, а ведь експлорер играет его медленней чем нужно - с задержкой между кадрами 0.1с, а надо 0.04с вот
кстати не пробовала запустить его ACDSee или каким нибудь просмотрщиком, не эксплорером? проигрываться будет быстрее
тоже самое и у твоей подписи огненной - запусти в просмотрщике картинок - гораздо лучше смотрится чем в браузере (у нее задержка между кадрами 0.05с)
Добавлено 14.05.05, 09:48
бред .
у тебя явно что-то с натройками браузера .
я вижу и ту и другую картинку совершенно нормально .
то что ты описываешь я виделу у себя когда использовала netscap у него идет резкое замедление картинок поэтому я их движение вообще вырубила .
моя подпись работает очень быстро . если ты видишь ее по кадрам то тебе надо лечить браузер . срочно
Добавлено 14.05.05, 13:26
ты еще скажи что катенок медленно перемещаеться
Замечали, когда только открываете веб-сайт, первые секунды всё тормозит? Скрол как-то не ровно работает, параллаксы скачут, а из анимации словно вырезали львиную долю кадров. Но очень скоро всё нормализуется. Не замечали такого? Взгляните на демо-страницу плагина, и сразу поймёте, о чем я.
Проблема в том, что динамика не может нормально работать, пока страница лагает. В качестве решения предлагаю плагин «Afterlag.js». Плагин позволяет отслеживать событие окончания лагов. Лаги прошли, включайте анимацию, тормозить не будет. А пока страница лагает, нечего и динамику запускать, только вид портить.
Как использовать
Подключаете JS файл с плагином, пишете:
Как только на странице кончатся лаги, ваша консоль начнёт выражать радость по этому поводу. Если jQuery использовать не хотите, подключите нативный плагин и напишите:
Результат будет тот же.
Это самое простое, что может сделать плагин. На самом деле у плагина есть API и куча других способов вызова, всё это в полном объеме описано в ридми репозитория на гитхабе. Там же и способы подключения, ссылки на CDN, название плагина в bower и модуля npm.
Почему всё тормозит
Давайте разберёмся, почему анимация лагает на старте. Рассмотрим анимацию кругляшка на демо-странице, его задача плавно подниматься вверх, затем опускаться вниз.
Анимация движения реализована с помощью метода animate библиотеки джэйквери. Анимируем мы единственный CSS атрибут top, его значение определяется заданной функцией от времени. Запустив анимацию, джэйквери старается каждое мгновение обновлять значение top. Если бы у джэйквери действительно получалось обновлять это значение так часто, то анимация была бы шикарно гладкой. Но у jQuery не получается.
Не получается, потому что JS исполняет все события в одном потоке. JS бежит по списку того, что нужно сделать, и делает это. Не все дела встают в конец списка. Если вы кликнули куда-то, тем самым вызвав какое-то событие, задачу по его исполнению воткнут в начало списка, чтобы выполнить его как можно скорее. Скорее, но не в тот же момент. Если суть не ухватываете, можете прочитать эту короткую статью, она более подробно рассказывает о том, как работают интервалы и таймауты в свете однопоточности JS. И не забывайте, что на самом деле все задачи исполняет браузер, и список дел, переданный от JS, еще разбавляется прочими задачами браузера.
Так вот, джэйквери хотела почаще обновлять значение top для нашего кругляшка. Но в момент загрузки страницы было очень много более приоритетных дел: страничку отрендерить, видео с ютуба подтянуть и так далее. Бедняга браузер был так занят, что успевал обновлять значение top только раз в 200–300 миллисекунд. За это время кругляшок исходя из заданной функции смещался уже пикселей на 60. В итоге круг не плавно подходит к своему новому положению, а телепортируется туда, создавая ощущение потерянных кадров, дёрганости и тормознутости. Потом, когда браузер доделал все свои важные дела, он начал своевременно обновлять значение top для круга, и анимация стала ровной.
Как работает «Afterlag.js»
Афтерлагу предстоит узнать, когда браузер перестанет быть таким занятым и сможет достаточно часто выполнять код, необходимый для гладкого воспроизведения анимации. Скажем, нас устроит, если задача анимации будет исполняться хотя бы раз в 50 миллисекунд ( frequency ). При инициализации афтерлаг запомнит текущее время и запустит интервал в 50 мс. Спустя 50 мс опять узнаем текущее время. Сравниваем текущее время с прежде зафиксированным, если действительно прошло 50 мс, значит лаги кончились. А если на самом деле прошло не 50 мс, а, скажем, 100 мс, значит на странице всё еще лаги и процедуру надо повторять до тех пор, пока интервал не начнёт работать так, как мы этого ожидаем.
Только я написал плагин по указанной выше схеме и решил, что он достаточно работоспособный. Но нет. Случается такое, что интервалу просто повезло. Бывало так, что первые две итерации ожидаемое значение прошедшего времени разнилось с реально прошедшим, на третью итерацию совпадало, а на четвертую опять разнилось. Решаем задачу в лоб: пускай ожидаемое время совпадёт с реально прошедшим 10 раз подряд ( iterations ).
«Ну вот, теперь всё наверняка работает как надо» —подумал я, и ошибся. Если установить не достаточно большие значения для ( frequency ) и ( iterations ), например 30 и 3, в первые моменты может случится такое, что браузер еще не был занят первые 90 мс, то есть 3 итерации по 30 мс, афтерлаг решал, что лаги кончились, а они на самом деле только начинались. Решаем опять в лоб: установим значение времени в течение которого нельзя доверять афтерлагу ( delay ) с запасом — 200 мс.
Обновление статьи (12 марта 2015):
По совету webmasterx была добавлена настройка ( need_lags ). Цитирую документацию: «При значении false афтерлаг сработает либо, если лаги закончатся, либо, если они даже не начнутся. Значение true разрешает афтерлагу сработать только после окончания лагов, то есть если лагов не было, афтелаг не сработает. Устанавливая значение true не забудьте также установить значение для timeout , в противно случае, если лагов не будет, афтерлаг так и не сработает.»
Конец обновления.
Теперь всё работает как надо. Есть еще один параметр, который я учел сразу, но решил сказать только сейчас. Это допустимая погрешность при сверке ожидаемого и реально прошедшего времени ( scatter ) — 5 мс. Не будем с браузером очень уж строгими.
Все числа указанные в этом разделе используются афтерлагом по умолчанию, но могут быть изменены разработчиком при инициализации.
Заключение
Анимация, реализованная при помощи CSS, гораздо меньше подвержена подобного рода лагам. Афтерлаг полезен только тогда, когда динамика сайта связана с JS, в том числе плавные параллаксы, анимация передвижения скрола и прочее. Мне было бы интересно узнать ваше мнение о полезности плагина.
Афтерлаг чаще всего срабатывает верно, но не даёт 100% гарантии. При изменении настроек приходится ловить баланс: большая надёжность и более долгое ожидание или меньшая надёжность и более короткое ожидание. Плагин придётся по душе тем разработчикам, которые любят, когда динамика работает красиво и так, как она была задумана.
В конце концов тоже пришёл к этому выводу, только так и не поняв почему хрому не нравится 2 анимации (кстати если убирать задержку у второй анимации для вебкита, то работает без торможения, но это какой-то грязный трюк)
Это смешно. Во первых как это может быть велосипедом, если анимации есть в спецификации. Во вторых где тот скрипт, который делает scale
То, что ты пытаешься изобрести, создано много лет назад.
То что «я пытаюсь изобрести» уже изобретено и работает некорректно в хроме. Моя задача: найти ошибку или решение проблемы
Я дал ссылку на плагин, который много лет используется на огромном количестве сайтов во всём мире. Который полностью реализует нужный тебе функционал и нужную тебе анимацию. Который нормально работает во всех браузерах. И для использования которого не требуется простыня самописного JS-кода.
А до тебя всё ещё не доходит.
@eandr_67 вопрос звучит «Почему анимация в хроме тормозит?», что означает — человек хочет разобраться в том, что делает, а вы наседаете со своими советами всенепременно использовать плагин.
To @Petroveg. Прежде чем делать самому, имеет смысл посмотреть, как сделано у других. Чтобы не задавать потом вопросы «Почему анимация в хроме тормозит?».
Ну вот, пошли аргументы "сам дурак". :) Очень сомневаюсь, что Вы сами стали разбираться в предложенной мешанине CSS и JS.
Что касается моего опыта, то прежде чем писать собственный JS-слайдер, я сначала попытался найти аналог с нужным функционалом. Потом, когда ничего, удовлетворяющего заказчика-перфекциониста, не нашлось, серьёзно покопался в потрохах нескольких слайдеров - чтобы понять используемые там алгоритмы. И только после этого стал писать собственный вариант.
@eandr_67 вы предлагаете решения, основанные на JS. А человек пытается сделать решение, основанное на animation. Разницу понимаете?
В хроме в принципе какие-то проблемы с transition и animation.
Если долго не выключать браузер, он начинает жутко тормозить с css анимацией.
Сам с этим столкнулся недавно. Саму проблему так и не решил пока. Из-за чего именно тормозит. Если перезагрузить компьютер - все работает быстро и плавно.
Сейчас ресайзил свой хром на сайте. Жутко тормозил. Зашел в этот тред. Спустя час увидел лишний горизонтальный скролл, добавил media (max-width на 50 пикселей больше, чтобы скролл не успевал появляться, так тормоза исчезли. Если интересно )
В последнее время анимированные картинки в формате GIF получили новую жизнь. Однако некоторые сайты настолько увлекаются ими, что это начинает уже раздражать. Из этой статьи вы узнаете, как взять гифки под контроль.
Google Chrome
К сожалению, Chrome не имеет встроенных настроек для управления гифками. К счастью, для этого браузера существует столько разнообразных расширений, что я без труда смог найти подходящее для решения этой проблемы. Выпущенное, кстати, компанией Google.
После установки этого расширения в панели инструментов браузера появится новая кнопка. Вам необходимо просто щёлкнуть по ней и выбрать в меню один из режимов воспроизведения анимации. Доступны три варианта: обычное воспроизведение, однократное воспроизведение и отображение статичной картинки.
Mozilla Firefox
При создании браузера Mozilla Firefox разработчики заранее позаботились о наличии соответствующих настроек. Для доступа к ним вам нужно будет совершить следующие действия:
- Введите в адресную строку браузера about:config.
- Ознакомьтесь с предупреждением и нажмите кнопку «Далее».
- Введите в строку поиска image.animation.
- Перед вами появится параметр image.animation_mode. По умолчанию он имеет значение normal, что означает беспрерывное проигрывание анимации по кругу. Вы можете изменить этот параметр на none или once. В первом случае анимация будет отключена, а во втором будет воспроизводиться только один раз.
- Закройте страницу настроек и перезагрузите браузер.
Если же вам недостаточно имеющихся в браузере возможностей, то можно прибегнуть к услугам стороннего расширения. Toggle animated GIFs умеет воспроизводить гифки по клику мышкой, ставить их на паузу и выполнять некоторые другие трюки.
Internet Explorer
C трудом могу представить, кто из наших читателей пользуется этим браузером, но допускаю, что где-то есть такой человек.
Так вот, хочу тебе сообщить, дорогой друг, что в твоём замечательном браузере тоже имеется возможность избавиться от анимированных картинок. Всё как у взрослых.
Для доступа к этой опции понадобится открыть окно «Свойства обозревателя», а затем переключиться на вкладку «Дополнительно». Здесь в разделе «Мультимедиа» следует снять флажок возле строки «Воспроизводить анимацию на веб-страницах». Для сохранения настроек необходимо перезапустить не только браузер, но и весь компьютер.
В браузере Microsoft Edge функция отключения анимации пока отсутствует. Впрочем, можно надеяться, что, благодаря появившейся недавно поддержке расширений, эта проблема в скором времени будет решена.
*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.
Лучшее средство против постоянных ошибок и нестабильной работы — сброс настроек. Вот как это сделать в самых популярных браузерах.
Chrome
1. Запустите браузер и откройте меню, нажав на три точки в верхнем правом углу экрана.
2. Перейдите во вкладку «Настройки» → «Дополнительные».
3. Опуститесь вниз и нажмите «Сбросить».
4. Система удалит настройки главной страницы и файлы cookie, а также отключит все расширения. Закладки и пароли останутся.
Firefox
1. Запустите браузер и перейдите по адресу about:support. Откроется страница с технической информацией.
2. Нажмите на кнопку «Очистить Firefox» в правой верхней части экрана.
3. Система удалит все дополнения и сбросит пользовательские установки. Ваши пароли и закладки останутся.
Перед тем как делать полный сброс настроек браузера, вы можете проверить его работу в безопасном режиме. Возможно, дело в расширениях. На странице about:support в правом верхнем углу экрана нажмите на «Перезапустить с отключёнными дополнениями».
Яндекс.Браузер
1. Запустите браузер и нажмите на три полоски в верхней правой части экрана.
2. Перейдите во вкладку «Настройки», опуститесь вниз страницы и нажмите «Открыть продвинутые настройки».
3. Найдите пункт «Сбросить настройки».
4. Браузер вернётся в исходное состояние без дополнений, закреплённых вкладок и временных файлов.
Opera
1. Запустите браузер и нажмите на значок Opera в верхнем левом углу экрана.
2. Перейдите во вкладку «Браузер». Затем нажмите на «Сбросить настройки браузера».
3. Система удалит файлы cookie, расширения, закреплённые вкладки и пользовательские установки.
Safari
В этом браузере нельзя сбросить настройки, поэтому придётся вручную чистить историю, кеш и расширения.
История
1. Зайдите в браузер и нажмите на иконку Safari в левом верхнем углу.
2. Выберите пункт «Очистить историю» → «Всю историю».
1. Зайдите в браузер, нажмите на иконку Safari в левом верхнем углу и выберите пункт «Настройки» → «Дополнения».
2. Поставьте галочку напротив «Показывать меню „Разработка“ в строке меню».
3. Нажмите на меню «Разработка» → «Очистить кеши».
Расширения
1. Зайдите в браузер, нажмите на иконку Safari в левом верхнем углу и выберите пункт «Настройки» → «Расширения».
Читайте также: