Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Как заставить обновляться картинку на JS?
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Как заставить обновляться картинку на JS?

Страниц (1): [1]
 

1. Bertolomych - 10 Июня, 2011 - 01:09:58 - перейти к сообщению
В общем, есть картинка. Она время от времени меняется (cgi-скриптом). Надо сделать так, чтобы в браузере она тоже менялась, ну, т.е. поддерживалась в актуальном состоянии. Сейчас сделал так:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. <script language="JavaScript" type="text/javascript">
  3. <!--
  4. var i = 1;
  5. id = setInterval(function(){
  6.        
  7.         url = 'http://url.to/image&i='+i;
  8.         hiddenImg = new Image();
  9.         hiddenImg.src = url;
  10.         document.map.src = hiddenImg.src;
  11.         i++;
  12.         }, 1000)
  13. //-->
  14. </script>
  15.  


Здесь параметр i в url'е ничего не значит, а включен туда только для того, что если url одинаковый, то браузер картинку не меняет. Для этой же цели он и растет постоянно.

Проблемы возникают следующие:
1. Когда картинка обновляется в Опере, она моргает (исчезает, и заменяется новой, при этом еще и весь текст прыгает вверх-вниз).
2. Постоянно растущий урл устрашает...

Вопрос: А!! Что делать?!?! Помогите!!
2. DeepVarvar - 10 Июня, 2011 - 01:14:17 - перейти к сообщению
Решения:
1. Поместить картинку в див соответствующих статичных размеров
2. использовать POST, JS-MathRandom() или сессии - вариантов куча...
3. Bertolomych - 10 Июня, 2011 - 13:58:30 - перейти к сообщению
DeepVarvar,
1. Понятно, что див. Но он решит проблему только с ёрзаньем текста. Но главная-то проблема не в этом, а в том что картинка моргает.
2. POST, JS-MathRandom() - это, как я понимаю, вариант того же самого только в скрытом виде. Хотя тоже интересно, как заставить картинку запрашивать через post? Я что-то не в курсе. А про сессии - можно поподробнее? о чем речь?
4. pastevgen - 10 Июня, 2011 - 14:04:03 - перейти к сообщению
Ну так не проблема с морганием Радость
Нужно сделать проверку, если значение i поменялось значит обновить иначе нет Радость
5. Bertolomych - 10 Июня, 2011 - 14:18:19 - перейти к сообщению
pastevgen, ок, моргать будет реже и через нерегулярные интервалы. но все равно ведь будет!
6. pastevgen - 10 Июня, 2011 - 14:36:12 - перейти к сообщению
Можно попробовать так

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('img').hide().load(function(){
  3.     $(this).show();
  4. });
  5.  


Правда не уверен что будет работать в старых версиях IE Радость

Но все же вариант! Хорошо
7. Давит - 10 Июня, 2011 - 15:02:14 - перейти к сообщению
Bertolomych пишет:
В общем, есть картинка. Она время от времени меняется (cgi-скриптом). Надо сделать так, чтобы в браузере она тоже менялась,


CODE (html):
скопировать код в буфер обмена
  1. <script type="text/javascript">
  2.  
  3.     document.write('<img src="url" />')
  4.  
  5. </script>
8. Bertolomych - 10 Июня, 2011 - 15:14:17 - перейти к сообщению
pastevgen, Гм.. Честно говоря, я ожидал, что этот вариант не будет работать уже потому, что jquery'евский аякс попытается отобразить картинку текстом. Однако же load, в отличие от, собственно ajax, отобразил картинку нормально. И добились мы следующего:
1. картинка стала моргать не только в опере, но и в фф.
2. при этом она перестала обновляться, хоть убей ее, вне зависимости от того, по какому урлу ее загрузишь.

Вывод: не совсем то, чего хотелось бы..

Давит, ну блин, так она будет не только моргать, но еще и ждать, пока картинка загрузится..
9. pastevgen - 10 Июня, 2011 - 15:26:55 - перейти к сообщению
hide я в спешке написал, а имелось введу что функция события load происходит когда объект img уже загружен!
А закрываем объект перед его сменой!

Детально помочь не могу так как щас у самого куча работы! Хорошо
Но желаю успеха! Улыбка

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('img').load(function(){
  3.     $(this).show();
  4. });
  5.  
10. Bertolomych - 10 Июня, 2011 - 15:47:27 - перейти к сообщению
pastevgen,
Честно говоря, я не понял, чем этот вариант отличается от исходного, однако работает!
Хотя нужна еще небольшая доработка:
CODE (javascript):
скопировать код в буфер обмена
  1. $('img').load(url, function(){
  2.     $(this).attr('src', url).show();
  3. });


Так что - спасибо!

 

Powered by ExBB FM 1.0 RC1