Сейчас на форуме: user99 (+1 невидимый пользователь)

 eXeL@B —› Оффтоп —› Синхронизация двух анимированных gif на страничке, это возможно?
Посл.ответ Сообщение


Ранг: 450.3 (мудрец), 13thx
Активность: 0.2↘0
Статус: Участник

 Создано: 10 января 2011 16:51
· Личное сообщение · #1

Предположим есть надпись, с двух сторон указывающие на неё стрелки, вот пример:

TEXT

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




Ранг: 469.0 (мудрец), 100thx
Активность: 0.25↘0
Статус: Участник
[www.AHTeam.org]

 Создано: 10 января 2011 17:07
· Личное сообщение · #2

В Опере обе гифки у меня при любых условиях синхронизируются. Можно еще попробовать сделать так: сначала грузить гифки а затем после загрузки страницы их отображать, по идее мигать они будут одновременно.

-----
-=истина где-то рядом=-


Ранг: 450.3 (мудрец), 13thx
Активность: 0.2↘0
Статус: Участник

 Создано: 10 января 2011 17:22
· Личное сообщение · #3

KingSise пишет:
сначала грузить гифки а затем после загрузки страницы их отображать

А есть пример? Я не силён в javascript. В смысле предзагрузку картинок я конечно находил, не врублюсь как потом это отображать в html.



Ранг: 203.3 (наставник)
Активность: 0.22↘0
Статус: Участник
UPX Killer -d

 Создано: 10 января 2011 17:48 · Поправил: AlexZ
· Личное сообщение · #4

Пример, боюсь, сходу не сочиню. Но есть в jQuery (это не сложно) вон так: docs.jquery.com/How_jQuery_Works
www.learningjquery.com/2006/09/introducing-document-ready

вам понадобится онреди:
Code:
  1.  $(document).ready(function(){
  2.    $("a").click(function(event){
  3.      alert("Thanks for visiting!");
  4.    });
  5.  });


-----
Я медленно снимаю с неё UPX... *FF_User*

Ранг: 53.9 (постоянный), 19thx
Активность: 0.04↘0
Статус: Участник

 Создано: 11 января 2011 02:46
· Личное сообщение · #5

Попробуй так
Сами картинки
Code:
  1. <img id="arr_r" src="right.gif" border="0" style="display: none;">
  2. <b>TEXT</b>
  3. <img id="arr_l" src="left.gif" border="0" style="display: none;">

Отображение скриптом
Code:
  1. window.onload = function(){
  2.     document.getElementById('arr_r').style.display='';
  3.     document.getElementById('arr_l').style.display=''
  4. };

Ранг: 114.8 (ветеран), 41thx
Активность: 0.1↘0
Статус: Участник

 Создано: 11 января 2011 05:30
· Личное сообщение · #6

имхо проще обе стрелки в одном гифе сделать (пробел между ними можно сделать прозрачным), а текст поверх написать




Ранг: 44.2 (посетитель), 69thx
Активность: 0.14↘0.02
Статус: Участник

 Создано: 11 января 2011 14:46
· Личное сообщение · #7

clagnut.com/sandbox/imagefades/



Ранг: 309.8 (мудрец), 21thx
Активность: 0.17↘0
Статус: Участник

 Создано: 11 января 2011 15:57
· Личное сообщение · #8

отстой

-----
Shalom ebanats!


Ранг: 450.3 (мудрец), 13thx
Активность: 0.2↘0
Статус: Участник

 Создано: 11 января 2011 16:12
· Личное сообщение · #9

_ruzmaz_ - первое о чём подумал, но проблема в том, что надпись между формируется динамически и может быть как очень короткая, так и очень длинная... В общем не вариант...

Zorn - этот код хорошо сработал на тестовой страничке, но провалился на ucoz хостинге. Я думаю хоть мы стилем и говорим, что не отображать до полной загрузки страницы - фактически проигрывание гифа начинается после загрузки файла броузером, а это одновременно сделать врядле можно.
Всё очень зыбко и зависит от многих параметров, броузеры, кэш, качество инета и т.д.
Да и сам онлоад как я понял очень броузерозависимый. Имею ввиду есть свои особенности.

AlexZ - я не проверил ваш вариант, но думаю к нему тоже относится всё сказанное выше. Анимированный гиф как я понял живёт своёй жизнью и ему на всё плевать...

Кстати ещё приходила идея, реализовать как нибудь в стилях левую картинку и правую в виде перевёрнутой левой. Тогда бы фактически картинка была бы одна и анимация шла бы синхронно.
Всё оказалось очень непросто и криво. Причём тоже от броузера многое зависит, нужно учитывать многое. Кому интересно тут пример.

В итоге решил забить на это дело, ну и пусть иногда будут не синхронные...
Спасибо всем кто участвовал!



Ранг: 114.8 (ветеран), 41thx
Активность: 0.1↘0
Статус: Участник

 Создано: 11 января 2011 18:49
· Личное сообщение · #10

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




Ранг: 44.2 (посетитель), 69thx
Активность: 0.14↘0.02
Статус: Участник

 Создано: 11 января 2011 22:22
· Личное сообщение · #11

btw, такими стрелками бабло уже не поднимешь, инфа 100% ;)




Ранг: 450.3 (мудрец), 13thx
Активность: 0.2↘0
Статус: Участник

 Создано: 12 января 2011 15:15
· Личное сообщение · #12

specz пишет:
такими стрелками бабло уже не поднимешь, инфа 100% ;)





Ранг: 53.9 (постоянный), 19thx
Активность: 0.04↘0
Статус: Участник

 Создано: 17 января 2011 06:36
· Личное сообщение · #13

ToBad пишет:
фактически проигрывание гифа начинается после загрузки файла броузером
Да, ступил чутка.
А если так попробовать ?
Code:
  1. window.onload = function(){
  2.   document.getElementById('arr_r').src='';
  3.   document.getElementById('arr_l').src='';
  4.   document.getElementById('arr_r').src='right.gif';
  5.   document.getElementById('arr_l').src='left.gif';
  6.   document.getElementById('arr_r').style.display='';
  7.   document.getElementById('arr_l').style.display=''
  8. };
 eXeL@B —› Оффтоп —› Синхронизация двух анимированных gif на страничке, это возможно?

У вас должно быть 20 пунктов ранга, чтобы оставлять сообщения в этом подфоруме, но у вас только 0

   Для печати Для печати