Периодически обновляйте <img>в jQuery

Question

Аналогично Как перезагрузить / обновить элемент (изображение) в jQuery , но не одновременно.

У меня есть веб-камера, которая сохраняет изображения каждые 2 секунды вместо потоковой передачи. Используя jQuery (или прямой JS), я хочу обновить только элемент изображения.

Должно быть легко, но все мои поиски показывают обновление по запросу.

Answer 1

setInterval(function(){
    $("#myimg").attr("src", "/myimg.jpg?"+new Date().getTime());
},2000);

Answer 2

Вы должны заставить браузер перераспределять изображение, а не извлекать его из кэша.Вы можете сделать это, изменив URL-адрес, добавив бесполезный параметр, который меняется каждый раз, например, отметку времени.

$('img.webcam').each(function() {
    var jqt = $(this);
    var src = jqt.attr('src');
    src = src.substr(0,src.indexOf('?'));
    src += '?_ts=' + new Date().getTime();
    jqt.attr('src',src);
});

Выполните этот фрагмент внутри таймера или по щелчку, или по обоим, или по другому.

Answer 3

setInterval - таймер, который будет выполнять функцию все x миллисекунд

setInterval(function () {
    var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

Answer 4

Это должно сделать работу:

window.setInterval(function() {
    var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

Answer 5

Добавьте метку времени к источнику изображения, которое будет обновлено.

setInterval(function(){
    $("img").each(function(){
       var timeStamp = (new Date()).getTime();
       $(this).attr("src", $(this).attr("src") + timeStamp );
    });
}, 2000);