Refresh <img> in jQuery periodically

Question

Similar to How to reload/refresh an element(image) in jQuery but not at the same time.

I have a webcam that saves images every 2 seconds rather than streaming. Using jQuery (or straight JS) I want to refresh just the image element.

Should be easy, but all my searches show the refresh on request.

Answer 1

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

Answer 2

You must force the browser to realod the image instead of taking it from cache. You can do it by changing the url, adding a useless parameter that changes each time, for example a timestamp.

$('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);
});

Execute this snippet inside a timer or on a click or both or whatever.

Answer 3

setInterval is a timer that will execute a function everything x milliseconds

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

Answer 4

This should do the job:

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