Jump to content
  • 0

Загрузка анимированного .gif из кеша браузера


Dima_2015
 Share

Question

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

Вопрос:

Есть ли способ загружать анимированные .gif изображения из кеша браузера не теряя анимацию?

Подробнее.

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

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

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

Конкретно, где это используется:

Есть приложение логической игры онлайн для ВКонтакта (вернее сделано оно давно для себя и сейчас на ВКонтакт интегрируется):

http://vkontakte.ru/app180099

Кстати рекомендую любителям логических игр...

Вот тут, когда едим чужие шарики - анимация может тормозить.

Для тех кто не зарегистрирован, моделирование проблемы:

http://mskhost.nichost.ru/lagmodel.html

Что можно придумать?

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

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
После кеширования мы будем видеть уже не анимированное изображение, а его последний кадр.

Что за бред? Для наглядности вот вам анимированный гиф -> :)

Link to comment
Share on other sites

  • 0
Что за бред? Для наглядности вот вам анимированный гиф -> :)

Не бред, зайди на ссылку данную в примере и "потыкайся", сделай несколько запусков при включенном кешировании браузера, затем обнови страничку и повтори.

Да.. важный видимо момент, что речь идет не о циклических гифах, как ты привел, а о конечных, однотактовых... хз как сказать, пример лучше пояснит :)

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

Edited by Dima_2015
Link to comment
Share on other sites

  • 0
Зашёл потыкался.

Кжшируют последний кадр только хром и Фф. Опера и ИЕ кэшируют правильно

На самом деле ИЕ тоже вполне себе кеширует, и Опера тоже может. К сожалению поймать чем это определяется мне не удается.

Вопрос открыт таки, что делать... надо чтоб везде кешировалось правильно - т.е. анимация всегда полностью показывалась и бралась из кеша.

Link to comment
Share on other sites

  • 0

И как я буду на нем делать если я в нем ни в зуб ногой?

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

Link to comment
Share on other sites

  • 0

Хм... кстати отличная идея, спасибо. Это частично решает проблему, скажем так лагов становится немного меньше при появлении большого кол-ва шариков. Т.е. грузится один и если он не лагает - то все хорошо, ну а если лагает загрузка этого одного - тормозят все, или пан или пропал ))

Но все-таки хочется решить задачу изначальную - грузить все с кеша и с анимацией, это будет наиболее быстро.

Link to comment
Share on other sites

  • 0
Знания? Их полно в инете, этих знаний. Лентяи должны платить за свою лень.

Не угодно ли будет гуру поиска знаний в инете продемонстрировать мастер-класс, и разом выдать ссылку на решение проблемы сабжа, желательно в таком вот виде:

http://lmgtfy.com/?q=%D0%B3%D0%BE%D0%BC%D0...A%D1%83&l=1

Edited by Dima_2015
Link to comment
Share on other sites

  • 0

Я вот не помню, как дела обстоят у браузеров с анимированными 24х битными png... Ну не важно.

Загружайте в слой за пределами экрана нужные картинки, потом клонируйте их.

Они должны быть в кеше и анимация, по идее, сработает так как надо.

Link to comment
Share on other sites

  • 0

Появилась идиотская идея. Спешу ней поделится ;)

Вместо однотактовых (одноцикловых) картинки использовать обычные циклические, а по завершению цикла, заменять изображение на последний кадр, который идет отдельной картинкой. Тогда это всё можно спокойно кешировать. Думаю такое можно реализовать на JS. Но это будет очень уж через *опу, если таких картинок много :)

Link to comment
Share on other sites

  • 0
Появилась идиотская идея. Спешу ней поделится ;)

Вместо однотактовых (одноцикловых) картинки использовать обычные циклические, а по завершению цикла, заменять изображение на последний кадр, который идет отдельной картинкой. Тогда это всё можно спокойно кешировать. Думаю такое можно реализовать на JS. Но это будет очень уж через *опу, если таких картинок много :)

Это была одна из первых идей, которая меня посетила при реализации. Но она несостоятельна, давай подумаем. Для того чтоб вовремя заменить циклическую картинку джаваскриптом нужно очень точно вовремя вызвать скрипт замены. Значит я должен точно знать период анимации и быть увереным в том, что джс не подведет. А далее, известно, что исполнение джаваскрипта и в частности ф-ция setTimeout, с помощью которой реализуются все отложенные вызовы переодически подтормаживает. Результатом этого будут совершенно сбивающие юзера с толку картинки шаров, колбасящихся то так то эдак, а потом становящихся статичными посреди акта превращения.

Короче говоря это не вариант.

И вообще, есть ли гарантия что при загрузке циклического гифа из кеша он всегда будет начинаться с одного и того же кадра?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy