Как показывать картинку только после загрузки?

Question

[Влад Зайцев]

Есть простая страница, которая перезагружает картинку с камеры каждые 2 секунды:

<div id="img_reload">
<img src = "http://camera1.lc/onvif/snapshot" width="673" height="505" />
</div>

<script>
setInterval(function(){var img_tag = '<img src="http://camera1.lc/onvif/snapshot?img' +Math.random(0,100)+ '"  width="673" height="505" />'; document.getElementById('img_reload').innerHTML = img_tag},2000);
</script>

Как сделать так, чтобы обновленная картинка заменяла старую только после полной загрузки? Сейчас при срабатывании скрипта по таймеру картинка пропадает, а затем начинает грузиться новая, в итоге изображение мерцает. Хочется, чтобы она сначала загрузилась полностью, а только потом отобразилась.

Answer 1

[l0cked]

setInterval(function() {
    var image = new Image();
    image.src = 'http://camera1.lc/onvif/snapshot?img'+Math.random(0,100);
    image.onload = function() { 
        var img_tag = '<img src="'+this.src+'" width="673" height="505" />';
        document.getElementById('img_reload').innerHTML = img_tag;
    }
}, 2000);

Comments

[Евгений Петров]

Если картинка в кэше, не сработает.

[Влад Зайцев]

Евгений Петров: для этого и есть +Math.random(0,100);

[Евгений Петров]

Влад Зайцев: Во-первых, Math.random() рано или поздно даст коллизии.
Во-вторых, если не даст, то решение ужасно из-за отказа от кэширования загружаемого контента.

[Влад Зайцев]

Евгений Петров: коллизии решаются числом побольше. А какой смысл кешировать картинку с камеры видеонаблюдения?

[Евгений Петров]

Влад Зайцев: В самом простом варианте вы правы — просто сменяется картинка. Если нет возврата по времени, то использовать кэш без надобности.
А Math.random() может дать коллизии и на большом числе. Метод генерирует псевдослучайные числа.

[Евгений Петров]

Забыл добавить, что самый простой вариант — текущее время в миллисекундах.

[Влад Зайцев]

Евгений Петров: да, я вот как раз подумал, что стоит таймстамп дописывать, а не рандом.