Есть несколько анимаций в формате gif, каждое, скажем, по 2 сек., надо, чтобы они показывались в цикле. Пытаюсь решить следующим образом: в верстке использую список ul и скрипт на javascript, который каждые 2 сек переключает видимость между элементами списка li. В начале все работает хорошо. Через некоторое время происходит рассинхронизация, т.е. следующая анимация gif может начинаться не сначала, а с промежуточной позиции. Через минуту работы ошибки накапливаются настолько, что уже становятся очень заметными. Каким образом можно решить такую задачу?
Оставьте одну картинку и попробуйте в том же цикле (через setTimeout) последовательно менять у неё свойство src. Анимация начинается с начала если присвоить свойству src новый адрес. Вот у вас и будет последовательность роликов. Добавлено спустя 50 секунд: Только нужно грамотно организовать прелоад этих роликов)
Через setTimeout, анимация отработает только 1 раз. Используйте setInterval и clearInterval - когда посчитаете нужным его завершить, если - это вообще потребуется.
Господа, я извиняюсь, но вы меня не совсем поняли. Суть проблемы чуть в ином, возможно я ее изложил неверно, поэтому постараюсь перефразировать. Есть несколько анимаций в формате gif, которые одновременно грузятся в браузер пользователя. Стоит задача последовательного воспроизведения каждого gif в одном месте в верстке. В принципе, решение простое - gif делаются видимыми через определенные промежутки времени. Проблема возникает с синхронизацией. Допустим, переключатель видимости имеет период 2 сек, анимация каждого gif тоже длится 2 сек. По идее, при срабатывании переключателя видимости, каждый следующий gif должен начинаться с нулевой отметки. На практике, длительность каждого gif может отличаться на десятки микросекунд. Плюс переключатель на скрипте javascript тоже не гарантировано сработает через 2000 мс. Поэтому со временем накапливается ошибка и gif начинают быть видимыми не с нулевого кадра, а, например, со второго или третьего. Поэтому очень интересует решение вопроса по синхронизации. Нигде найти не смог аналог. P.S. Анимация на чистом CSS работает отлично, но отсутствие поддержки анимации CSS в IE9 и ниже заставляет использовать js.
Периодически скриптом перезагружать картинку с другим параметром в адресе например, первый раз адрес src=site.ru/img/img1.gif?rand=123 через 2 минуты src=site.ru/img/img1.gif?rand=456 но, нужно Также анимацию можно делать на JS, просто меняя картинки. Тогда точно синхронно будет.
Тут возникает другая проблема - непредсказуемость времени загрузки через Интернет. Исходные gif достаточно тяжелые и иногда вместо gif требуется воспроизводить swf. Поэтому и хотелось всю анимацию сразу загружать на комп пользователя.
Просто пример, как загружать одну картинку, но много раз Код (Text): <script> var i; var imgArr = new Array(); for(i=0; i<10; i++){ imgArr[i] = new Image(); imgArr[i].src = "/test/img/6.jpg?r="+(i+1); } </script> Сразу и загружайте много всего. Кстати, можно вместо gif анимации другим способом переключать картинки. Создаётся полотно, в котором в ряд нарисованы все стадии анимации. Скриптом только меняется стиль контейнера, в котором бэкграундом стоит картинка. Изображение в бэкграунде смещается.
Пример смещения картинки Код (PHP): <!DOCTYPE html> <html> <head> <title>anim css</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script> var posX = 0; function animStep(){ posX += 2; $("#out").text("pos X: "+posX); $("#pic").css("background-position", posX+"px 0"); } $(document).ready(function(){ var tm = setInterval(animStep, 1000); }); </script> <style> #pic{ width:50px; height:50px; background:url("/test/img/6.jpg") 0 0; } </style> </head> <body> <div id="pic"></div> <div id="out"></div> </body> </html>
Бойкот дело неразумное, в моем случае, у потенциальной аудитории очень много браузеров IE и еще к тому же старых версия. Проблему решил. Спасибо за дельные советы. Алгоритм решения был следующий. Как советовали синхронизировал ролики путем загрузки в src и установки интервала. Но в начале загрузки страницы сразу загружал все ролики в соответствующие li, а при инициализации делал очистку всех src. Ролики уже в кэше, поэтому при вызове в цикле задержек не было. Сейчас пытаюсь скрестить ежа и ужа , т.е. схожим образом обрабатывать совместно ролики gif и swf.
а еще потому что он в корпоративном секторе обеспечивает обратную совместимость в обратную сторону до любой версии.
Всем добрый вечер! Продолжаю отлаживать свой скрипт. Он работает почти правильно по сравнению с первоначальном вариантом. НО! Если раньше рассинхронизация происходила буквально через 1 минуту работы плеера, то сейчас рассинхронизация начинается минут через 10-12. Пока нахожу одно объяснение - несмотря на то, что очищаю содержимое li, анимационный gif или ролик swf все равно продолжает крутиться в памяти. И поэтому рассинхронизация остается. Думаю сделать следующим образом - не просто очищать li, но и удалять gif и swf из кэша, но сохранить из перед этом в каком-то другом месте на компе пользователя, а потом вновь загрузить в браузер. Я не очень точно знаю как это сделать на практике. Как понимаю, доступа из браузера к диску у меня нет, могу только работать в области памяти, выделенной для браузера. Подскажите, как это можно сделать?
Если уж у тебя флеш присутствует на странице, то можно данные хранить во флеш ролике и брать оттуда JS скриптом, когда нужно, через ExternalInterface. Картинки можно закодировать в строковый вид с помощью base64_encode, и так передавать. Но это как-то сложновато получается, не правда ли? Думаю, самый "синхронный" способ - это сдвигать бэкграунд, как писал выше.