Доброго времени суток всем!

Во-первых...
Я долгое время не посещал этот сайт и рад снова поприветствовать всех братьев по разуму и пообщаться с умными людьми 

Во-вторых смысл моего появления - вопрос...
Есть ли способ загружать анимированные .gif изображения из кеша браузера не теряя анимацию?
Долго думал это тема джаваскрипта или верстки, и решил таки что к js ближе...

Подробнее.
Думаю известная проблема - если мы делаем при каких-то событиях мыши загрузку анимированных изображений, то анимацию мы будем видеть ровно до тех пор, пока изображение не закешируется браузером, обычно этих разов будет 1, если не предпринять доп. усилий. После кеширования мы будем видеть уже не анимированное изображение, а его последний кадр.
Стандартное js-решение этой проблемы - добавление случайного числа к урлу загружаемой картинки, это приводит к загрузке изображения снова с сервера.

В моем случае это решение содержит изъян: картинок может загружаться довольно много одновременно и скорость их загрузки критична. Если у юзера нету тормозов инета и мой хост отдает изображения нормально, то проблем не наблюдается. Но стоит появиться лагам с той или другой стороны и загрузка изображений начинает подтормаживать. Это может сбить с толку...


Конкретно, где это используется:
Есть приложение логической игры онлайн для ВКонтакта (вернее сделано оно давно для себя и сейчас на ВКонтакт интегрируется):
http://vkontakte.ru/app180099
Кстати рекомендую любителям логических игр...
Вот тут, когда едим чужие шарики - анимация может тормозить.

Для тех кто не зарегистрирован, моделирование проблемы:
http://mskhost.nichost.ru/lagmodel.html

P.S. У меня проявляется в ФФ 3.5.7, но точно помню что раньше было и в других браузерах. Сейчас ИЕ и Опера вроде не задерживают, возможно более новые версии сейчас.


Что можно придумать?
Слышал про новую технологию с элементом canvas, может она поможет?

Upd: речь идет именно об однотактовых анимированных гифах, с циклическими вроде бы этой проблемы нет.


Это сообщение отредактировал(а) Dima 2015 - 31.1.2010, 10:48

Так что, госпада профи, никаких идей?

это называется JS-анимация и гифы ни при чём; верно? Или об однократно анимированных?

canvas не поможет. Нужно кешировать отдельные картинки и анимировать через JS.

12345c, если я правильно понял твой вопрос, то речь именно об однотактно-анимированных. Вот:
http://mskhost.nichost.ru/bwars/design/0-red.gif?v1

Кешировать отдельные картинки и анимировать через JS, т.е. разбить гифку на кадры и реализовать динамику тупым джаваскриптовым быстрым перебираением кадров? Плюс - одновременно может происходить подстановка до 10ти картинок, а в экстремальных случаях до 60-ти, и каждая скажем кадров из 10-ти, это потянут браузеры?
Ну в любом случае попробовать можно конечно...

А почему канвас не поможет, ведь много чего на нем хитрого делают...

Это сообщение отредактировал(а) Dima 2015 - 1.2.2010, 05:49

Up

Господа, вопрос до сих пор открыт, гениальные идеи до сих пор востребованы...

В общем появилось 3+ идеи.

1. Заменить анимационные однотактовые гифы на циклические, в которых последний кадр задерживается на несколько секунд. За эти несколько секунд менять их на статические.
Эта идея себя не оправдала - не работает.

2. Сделать анимацию статическими гифами на javascript. Т.е. разбиваем картинки на кадры, кешируем все кадры и подставляем js-ом примерно вот так

Тут особенно прильщает то, что при таком подходе мы меняем src лишь у одного объекта и будут перезагружены все картинки. Я прав? И во всех ли это браузерах так? Еще не успел написать тестер, вдруг кто выведет из заблуждения что это будет работать...

3. Самый в общем-то ломовой и простой способ. Кешируем статические картинки и меняем их размер javascript-ом. На сколько я понимаю, это самый неФенШуйный способ js-анимации, да и уступает п.2 т.к. число итераций прямо пропорционально числу анимируемых картинок.

4. Я жду ваших идей!

Посмотрел на моделирование проблемы:
http://mskhost.nichost.ru/lagmodel.html
Решения.
1) если картинка одного типа, то никакой многокартиночности не надо - используется одна предзагруженная, меняется при анимации по JS масштаб и положение или просто центровка в диве, и этого достаточно для анимации.
2) Если поведение картинок сложнее и их больше одной - анимация на JS делается сгруппированной картинкой (то, что называется CSS-спрайт, но используется для целей анимации) (тоже с предзагрузкой), меняются CSS. Для экономии траффика в одну картинку ничего не мешает вставить несколько сгруппированных.
3) анимация уже есть в jQuery, там есть очереди и работа с ними, что может быть полезно, поэтому можно использовать её. http://jqapi.com/#p=animate

Это сообщение отредактировал(а) 12345c - 22.2.2010, 13:37

Черт, как неудачно.
12345c ты смотрел именно в тот момент, когда она была на половину поломана, сейчас восстановил. Но все равно спасибо за советы, буду разбираться, идей уже прилично набирается 

Посмотрел ещё раз - ничего не изменилось: грузятся картинки в почти произвольном порядке, что само по себе некрасииво. При управляемой анимации можно делать, как требуется.

Голосую за спрайты. Там, кроме прочего, при необходимости можно и субпиксельную точность реализовать...

Почему так долго и всё на уровне идей?
Вот заготовка, на которую остаётся наложить логику и анимацию, чтобы получить красивое демо. (Использовать jQ-ui.)
В данном виде демонстрируется, что обновляется группа картинок синхронно и мгновенно (кеширована заранее). Почти то же будет с анимацией (JS).


Код без кириллицы для демонстрации вынесен сюда: http://savedbythegoog.appspot.com/?id=584c...adf1b230cd3a563
(Используется Google Code Playground; другого в онлайне, с кириллицей и без регистрации пока не известно; здесь же можно загнать код из демонстрации в EditHTML и тут же править и отлаживать.)