Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обновление изображения на странице html ежесекундно! (https://javascript.ru/forum/events/10082-obnovlenie-izobrazheniya-na-stranice-html-ezhesekundno.html)

belousov 18.06.2010 16:01

Обновление изображения на странице html ежесекундно!
 
Всем добрый день!
Прошу о помощи, мне необходимо решить следущую задачу!
Есть сетевая камера, необходимо выводить изображение с нее на html страницу. изображение имеет юрл
http://62.141.120.196:90/record/current.jpg?rand=989678
если постоянно обновлять страницу картинка меняется, а как сделать так, чтобы страницу обновлять было не нужно и изображение перезагрудалость раз в секунду?
заранее спасибо!

Skipp 18.06.2010 16:07

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript">

var speed = 2;

function cam_show()
{
		var imac = document.getElementById('camimage');
		var time = now();
		imac.onload = function()
		{
		start_show(imac, now()-time);
		document.getElementById('speed').innerHTML = ((now()-time)*(speed+5))/1000;
		};
		imac.src = "http://62.141.120.196:90/record/current.jpg?r=" + Math.random();
}
function now(){
	return (new Date).getTime();
}

function start_show(img, time)
{
	
	setTimeout(function()
	{
		var ctime = now(); 
		img.onload = function()
		{
			start_show(img, now()-ctime)
			document.getElementById('speed').innerHTML = ((now()-ctime)*(speed+5))/1000;
		};
		img.src = "http://62.141.120.196:90/record/current.jpg?r=" + Math.random();
	}, time*(speed+5));
}
</script>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<meta http-equiv="imagetoolbar" content="no">
</head>
<body onload="cam_show()">
<div align="center">
      <img width="704" height="576" id="camimage" src="" alt="">
	  <div>Следующее обновление через <span id="speed"></span> сек.</div>

	  <div >Выберите скорость:</div>
	  <div>Турбо: <input name="rad" type="radio" value="0" onclick="if(this.value != '') speed=this.value;"></div>
	  <div>Быстро: <input name="rad" type="radio" value="1" onclick="if(this.value != '') speed=this.value;"></div>
	  <div>Стандарт: <input name="rad" type="radio" value="2" onclick="if(this.value != '') speed=this.value;" checked="checked"></div>
	  <div>Медленно: <input name="rad" type="radio" value="3" onclick="if(this.value != '') speed=this.value;"></div>
	  <div>Черепаха: <input name="rad" type="radio" value="4" onclick="if(this.value != '') speed=this.value;"></div>

</div>
</body>
</html>

belousov 18.06.2010 16:16

Спасибо))
но к сожалению у меня не работает!
один раз изображение грузится и все! больше обновлений нет.

Skipp 18.06.2010 16:22

belousov,
браузер какой?

belousov 18.06.2010 16:24

Странно))
но после того как я скопировал отсюда в дримвьевер
у меня изменилась вторая ссылка на картинку))
а тав все работает теперь))) спасибо большое)))

рони 18.06.2010 16:46

Skipp,
Код рабочий но у меня не сработала картинка в "показать" ни в одном из популярных браузеров ...скорее всего политика безобасности ... пример воспроизводиться на стороннем сайте да ещё сам грузит с другого ...
Ие выдал следующее...
Фильтр межузловых сценариев (XSS) в Internet Explorer помогает предотвратить добавление одним веб-узлом кода сценария на другой веб-узел. ...

Skipp 18.06.2010 16:57

рони,
я тоже заметил, но времени уже с этим возится нет:)

Feex 10.10.2017 11:07

Привет всем)
Давно искал решение такого же вопроса)
А как сделать 3 картинки на одной странице?
т.е у меня три разных изображения (камеры) выводятся на страницу, и задача та же: обновление изображений без перезагрузки страницы. Нужно чтоб все три обновлялись вместе.


Часовой пояс GMT +3, время: 22:01.