Обновление картинки по таймеру
 

Есть он-лайн камера, которая выдаёт в сеть картинки. Для её отображения на сайте хочу сделать обновление картинки по таймеру. С использованием jQuery написал следующее:

<div id="frame">
<img src="">
<div>
<script>
setInterval(function(){
$('#frame').replaceWith('<img src="">');
}, 300);
</script>

Но обновление совершается только один раз. Как сделать постоянное обновление кадров?

Что ты в итоге пишешь в тот src?

Путь к картинке http://домен/картинка.jpg

Домен отличный от домена, на котором сайт

Всегда одно и то же?

replaceWith заменяет <div id="frame"></div> на img.
После первой итерации нужного дива уже нет.

setInterval(function(){
		$('#frame img').attr('src','http://ftp.sktemp.ru/building8003.jpg?'+Math.random()+'">');
	}, 300);

Спасибо!

А можно как-то мигание победить при смене кадров?

можно..
например можно сделать два элемента img и поочереди менять им src и z-index.

мсье знает толк..
сударь, вы изволили каждую итерацию переопределять переменные..

Нужно же как-то оправдать гигагерцы и гигабайты современных компьютеров. :)

Думаю, что можно вообще без пометки кадра, а просто вести счётчик итерации.

var next, nextid, marker = 0, i = 1, int;
int = setInterval(function () {
    if (marker == 0) {
        marker = 1;
    } else {
        marker = 0;
    }
    document.getElementsByTagName('img')[marker].src = 'http://ftp.sktemp.ru/building8003.jpg?' + Math.random() + '';
    document.getElementsByTagName('img')[marker].style.zIndex = i++;
}, 300);

ага, типа так))

Зачем нужен int?

чтобы, если понадобится, можно было сделать clearInterval() в будущем..

А зачем справа от Math.random() стоит + ''?

у вас в коде было обособлено плюсами, а мне было лениво убирать)))

При таком методе получается, что появляется новый кадр. Потом старый кадр. Потом новый кадр. Посмотрите
http://www.sktemp.spb.ru/nk.html

Дёргается изображение. Чего ранее не было, когда я своё творчество навоял.

ок, извратимся донемогу))

var i = 1, int, cont, img;
cont = document.body;
int = setInterval(function () {

    img = document.createElement('img');
    img.src = 'http://ftp.sktemp.ru/building8003.jpg?' + Math.random() + '';
    img.style.zIndex = i++;
    img.style.position = 'absolute';
    cont.appendChild(img);

    if (document.getElementsByTagName('img').length >= 3) {
        cont.removeChild(document.getElementsByTagName('img')[0]);
    }

}, 300);

У меня теперь в верхнем левом углу в FireFox постоянно мигает символ отсутствующей картинки. Но скачков кадров больше нет. Отчего так?

понятия не имею, у меня в лисе все норм.. может z-index пишется раньше, чем картинка загрузится..

Помогите люди.
 

Есть код, помогите реализовать обновление блока по таймеру(проблема в том что обновляется сейчас один раз...я нуб в js): <script>
setInterval(function (){$('#frame').attr('<?php include $_SERVER['DOCUMENT_ROOT'] . "/modul/chat_f.php";?>');}, 3000);
</script>
<div id="frame">
обновляем...
</div>

Судя по коду большой профи в РНР?

Весь код глупость. $(селектор).attr(имя атрибута) - это получить его значение. А что может определить в качестве имени атрибута сервер, да еще целым подключаемым файлом?

Помогите люди.
 

Вопрос то остается... как обновить по таймеру отдельный блок див?

Ну тогда надо думать.

Путь выражение $('#frame').attr будет верным, к примеру $('#frame').attr('myname', value). Это означает, что атрибуту элемента 'myname' будет присвоено значение value, то есть в коде $('#frame').attr('myname', '<?php include $_SERVER['DOCUMENT_ROOT'] . "/modul/chat_f.php";?>');. Вопрос - если /modul/chat_f.php (можно работать и с относительными путями, не обязательно $_SERVER['DOCUMENT_ROOT'] еще), это скрипт возвращающий содержимое, которое должно отражаться в '#frame', то почему вы это содержимое пытаетесь воткнуть в атрибут?

Если бы, к примеру, '#frame' было бы iframe, тогда да - меняя значение его атрибута src можно было бы менять его содержимое. Но в этом случае значением src должен быть url, а не результат выполнения серверного скрипта.

Скорее всего вам нужно это.

Разные браузеры по-разному рендерят картинки. В Google Chrome сильно заметно мерцание. Происходит это в частности потому, что Вы меняете img.src и img.style.zIndex одновременно. А нужно показывать картинку после её полной загрузки.

То есть, необходимо обрабатывать событие img.onload и по нему менять zIndex ("поднимать наверх"), либо при механизме из двух img попеременно менять им свойство display.

Также проблемы возникают при медленном интернете, когда при интервале загрузки 1 сек картинка не успевает загрузиться и в этот момент уже отдается команда на смену её src, т.е. загрузку новой картинки. Избавиться от этого можно опять таки запуском таймера по событию img.onload.
На случай проблем с интернетом/ftp стоит также обрабатывать событие img.onerror и перезапускать таймер.